Работа с ref в React

Работа с ref в React

От автора: React ref позволяет получить доступ к узлам DOM непосредственно внутри React. Это полезно в ситуациях, когда, например, вы хотите изменить дочерний элемент компонента. Предположим, вы хотите изменить значение элемента input, но без использования свойства или повторного рендеринга всего компонента. Это то, что мы рассмотрим в этом посте.

Как создать ref

createRef() — это новый API, который поставляется с React 16.3. Вы можете создать ref, вызвав React.createRef() и связав с ним элемент React, используя атрибут ref для элемента.

Мы можем «ссылаться» на узел ref, созданный в методе рендеринга, с доступом к текущему атрибуту ref. В приведенном выше примере это будет this.exampleRef.current. Вот еще один пример:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Как может происходить общение между дочерним компонентом и элементом, содержащим ref.

Это компонент, который отображает текст, поле ввода и кнопку. Параметр ref создается в конструкторе и затем привязывается к элементу ввода при его рендеринге. Когда кнопка нажата, значение, представленное элементом ввода (с привязанным к нему ref), используется для обновления состояния текста (содержащегося в теге H3). Мы используем this.textInput.current.value для доступа к значению, и новое состояние затем отображается на экране.

Передача функции обратного вызова в ref

React позволяет создать ref, передав функцию обратного вызова атрибуту ref компонента. Вот как это выглядит:

Обратный вызов используется для хранения ссылки на узел DOM в свойстве экземпляра. Когда мы хотим использовать эту ссылку, мы получаем доступ к ней, используя:

Посмотрите, как это выглядит в том же примере, который мы использовали ранее.

Когда вы используете обратный вызов, как мы это делали выше, React выполнит обратный вызов ref с узлом DOM, когда компонент будет монтироваться; когда компонент будет размонтироваться, он будет назван с нулем. Также возможно передать ref из родительского компонента в дочерний, используя обратные вызовы.

Давайте создадим наш «немой» компонент, который выводит простые введенные данные:

Этот компонент ожидает реквизиты inputRef из своего родительского компонента, которые затем используются для создания ссылки на узел DOM. Вот родительский компонент:

В компоненте App мы хотим получить текст, который вводится в поле ввода (которое находится в дочернем компоненте), чтобы мы могли его отобразить. Ссылка создается с помощью обратного вызова, как в первом примере этого раздела. Ключевым моментом является то, как мы получаем доступ к DOM элемента ввода в компоненте Input из компонента App. Если вы внимательно посмотрите код, мы обращаемся к нему с помощью this.inputElement. Таким образом, при обновлении состояния значения в компоненте App мы получаем текст, который был введен в поле ввода, используя this.inputElement.value.

Атрибут ref как строка

Это старый способ создания ссылки, и, скорее всего, он будет удален в будущей версии из-за некоторых связанных с ним проблем. Команда React советует не использовать его, поскольку он помечен в документации, как «устаревший». Мы все равно включаем его в эту статью, потому что есть шанс, что вы встретите его в базе кода.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Возвращаясь к нашему примеру элемента ввода, значение которого используется для обновления передаваемого текстового значения:

Инициализируется компонент, и мы начинаем со значения по умолчанию — пустой строки (value = »). Компонент отображает текст и форму, как обычно, и, как и раньше, текст H3 обновляет состояние, когда форма отправляется с содержимым, введенным в поле ввода.

Мы создали ref, установив для свойства ref поля ввода — textInput. Это дает нам доступ к значению элемента ввода в методе handleSubmit(), используя this.refs.textInput.value.

Пересылка ref от одного компонента в другой

** Пересылка ref — это метод передачи ref от компонента к дочернему компоненту с использованием метода React.forwardRef ().

Вернемся к нашему примеру поля ввода, которое обновляет значение текста при его отправке:

В этом примере мы создали ref со значением inputRef, и хотим передать его дочернему компоненту в качестве атрибута ref, который мы можем использовать для обновления состояния текста.

Вот альтернативный способ сделать это, указав ref вне компонента App:

Использование ref для валидации формы

Мы все знаем, что валидация формы — это что-то очень сложное, но это то, с чем отлично справляется React. Вы прекрасно знаете о таких вещах, как проверка заполнения обязательных полей. Или проверка наличия в пароле, как минимум, шести символов. Refs может использоваться и в этих случаях.

Мы использовали createRef() для создания ref для поля ввода и передали его в качестве параметра методу валидации. Мы заполняем массив ошибок, когда в одном из полей ввода возникает ошибка, которую мы затем отображаем пользователю.

Вот и все о ref!

Надеюсь, это пошаговое руководство дало вам представление о том, насколько мощными может быть ref. Это отличный способ обновить часть компонента без необходимости повторной обработки. Это удобно для написания более компактного кода и повышения производительности.

В то же время стоит прислушаться к советам документации самого React и не использовать ref слишком часто:

«Первым признаком того, что вам стоит использовать ref, может быть ситуация, когда вам нужно «заставить, чтобы что-то случилось» в вашем приложении. В этом случае, подумайте на тем, какому компоненту в иерархии компонентов должно принадлежать состояние. Часто становится становится понятно, что это должен быть компонент более высокого уровня в иерархии».

Вам все понятно? Отлично.

Автор: Kingsley Silas

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree