Если вы здесь, это означает, что вы могли встретить слово «refs» при разработке приложений для реагирования или при поиске ответов в stackoverflow. Итак, в этой статье я собираюсь объяснить рефери как можно проще.
Традиционно, чтобы получить доступ к элементу DOM, мы делаем такие вещи, как:
document.getElementByID('cool');
И после этого мы получаем доступ к свойствам и методам этого элемента внутри нашего скрипта. Но можете ли вы спросить себя, как вы реагируете на это сейчас? Подумайте об этом, и тогда эта статья вам очень поможет.
Подумайте об элементе ввода <input type="text" id="cool" />
Мы можем легко получить его значение, используя вышеуказанный метод, но в реакции мы достигаем этого в основном с помощью привязки переменной состояния к каждому входу и последующего обновления значения в функции - интенсивное использование состояния для такой простой задачи. А вот и Refs.
Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга ».
Теперь вместо id мы даем refs <input type="text" ref={this.inputRef} />
где inputRef - это свойство, которое мы создаем в конструкторе, аналогичном переменной состояния с помощью функции createRef ().
Теперь, чтобы получить доступ к значению этого поля ввода где угодно:
this.inputRef.current.value
CreateRef () создает здесь текущий объект, который нам нужно добавить, чтобы использовать какие-либо свойства или методы этого элемента DOM.
Refs не ограничивается только полями ввода. Вы можете принять это так, где бы вы ни использовали другие методы DOM, вы можете использовать здесь ref. Однако официальная документация советует не сильно использовать рефы.
Теперь я покажу вам, как получить доступ к другим методам компонента с помощью ref, мы создадим 2 класса, родительский класс и дочерний класс, который представляет собой не что иное, как поле ввода, и мы получим доступ к функции дочернего компонента в родительском компоненте. используя исх. Поскольку он также является частью модели DOM.
Здесь, в родительском классе, мы использовали метод focusInput дочернего класса. Считайте дочерний класс элементом ввода HTML с присутствующим методом focusInput. Мы дали ссылку на компонент Input (дочерний) и, используя эту ссылку, получаем доступ к его методу. Просто, правда?
Я надеюсь, что это было хорошее чтение. Обычно я пишу статьи на React, вы можете следить за мной в среде.
