Применение хука useRef для DOM в React

На одном из предыдущих занятий мы упоминали, что наиболее часто рефы применяются для доступа к DOM элементам.

Рефы придут на помощь тогда, когда вам, например, нужно сфокусироваться на элементе, сделать скрол или вычислить его размеры и позицию, а возможно воспользоваться какими-то его методами или свойствами, ведь для таких вещей в React нет встроенных методов.

Давайте посмотрим на примере с инпутом, как это делается. Создадим компонент с инпутом и кнопкой:

App.jsxreturn (
  <div>
    <input />
    <button>focus</button>
  </div>
);

Для начала, импортируем в компонент useRef:

App.jsximport { useRef } from 'react';

И заведем реф ref в компоненте. Инициализируем его значением null:

App.jsxconst ref = useRef(null);

Навесим на кнопочку обработчик клика:

App.jsx<button onClick={handleClick}>focus</button>

Чтобы иметь доступ к инпуту, запишем наш реф ref в атрибут ref инпута. Таким образом, когда React будет создавать DOM узел для этого инпута, он положит ссылку на него в ref.current и мы сможем пользоваться методами инпута:

App.jsx<input ref={ref} />

И наконец, добавим функцию обработки клика, чтобы при клике на кнопку, на инпут наводился фокус. Теперь мы можем это сделать через реф, в котором лежит ссылка на наш инпут, обратившись к его методу focus:

App.jsxfunction handleClick() {
  ref.current.focus();
}

Понажимайте кнопочку и убедитесь, что на инпут наводится фокус.