Применение хука useRef для DOM в React
На одном из предыдущих занятий мы упоминали, что наиболее часто рефы применяются для доступа к DOM элементам.
Рефы придут на помощь тогда, когда вам, например, нужно сфокусироваться на элементе, сделать скрол или вычислить его размеры и позицию, а возможно воспользоваться какими-то его методами или свойствами, ведь для таких вещей в React нет встроенных методов.
Давайте посмотрим на примере с инпутом, как это делается. Создадим компонент с инпутом и кнопкой:
return (
<div>
<input />
<button>focus</button>
</div>
);
Для начала, импортируем в компонент
useRef:
import { useRef } from 'react';
И заведем реф ref в компоненте.
Инициализируем его значением null:
const ref = useRef(null);
Навесим на кнопочку обработчик клика:
<button onClick={handleClick}>focus</button>
Чтобы иметь доступ к инпуту, запишем наш
реф ref в атрибут ref инпута.
Таким образом, когда React будет создавать
DOM узел для этого инпута, он положит ссылку
на него в ref.current и мы сможем
пользоваться методами инпута:
<input ref={ref} />
И наконец, добавим функцию обработки клика,
чтобы при клике на кнопку, на инпут
наводился фокус. Теперь мы можем это
сделать через реф, в котором лежит
ссылка на наш инпут, обратившись к его
методу focus:
function handleClick() {
ref.current.focus();
}
Понажимайте кнопочку и убедитесь, что на инпут наводится фокус.
Возьмите код компонента App,
который мы написали на этом уроке и
сделайте так, чтобы по клику на кнопку
в инпуте кроме наведения фокуса
происходило еще и очищение поля ввода.
Воспользуйтесь для этого свойством
value инпута.