Използване на хука useRef за DOM в React

В един от предишните уроци споменахме, че рефите най-често се използват за достъп до DOM елементи.

Рефите ще дойдат на помощ тогава, когато, например, трябва да фокусирате елемент, да направите скрол или да изчислите неговия размер и позиция, или може би да използвате някои от неговите методи или свойства, тъй като за такива неща в React няма вградени методи.

Нека да разгледаме пример с input поле, как се прави това. Нека създадем компонент с input поле и бутон:

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>

За да имаме достъп до input полето, нека запишем нашия реф ref в атрибута ref на input полето. По този начин, когато React създава DOM възел за това input поле, той ще постави препратка към него в ref.current и ще можем да използваме методите на input полето:

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

И накрая, нека добавим функцията за обработка на клик, така че при кликване на бутона, input полето да получи фокус. Сега можем да направим това чрез рефа, в който се намира препратката към нашето input поле, като се обърнем към неговия метод focus:

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

Натискайте бутона и се убедете, че input полето получава фокус.