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

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

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

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

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

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

import { useRef } from 'react';

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

const ref = useRef(null);

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

<button onClick={handleClick}>focus</button>

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

<input ref={ref} />

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

function handleClick() {
	ref.current.focus();
}

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

Вземете кода на компонента App, който написахме в този урок и направете така, че при кликване на бутона в input полето, освен поставяне на фокус, да се извършва и изчистване на полето за въвеждане. Използвайте за това свойството value на input полето.