Utilizarea hook-ului useRef pentru DOM în React

Într-una din lecțiile anterioare am menționat că ref-urile sunt utilizate cel mai frecvent pentru accesarea elementelor DOM.

Ref-urile vor veni în ajutor atunci când, de exemplu, trebuie să focalizați asupra unui element, să faceți scroll sau să îi calculați dimensiunile și poziția, sau poate să folosiți unele dintre metodele sau proprietățile sale, deoarece pentru astfel de lucruri în React nu există metode încorporate.

Să ne uităm la un exemplu cu un input, cum se face acest lucru. Să creăm un component cu un input și un buton:

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

Pentru început, importăm în component useRef:

import { useRef } from 'react';

Și să creăm un ref ref în component. Îl inițializăm cu valoarea null:

const ref = useRef(null);

Să adăugăm pe buton un handler de click:

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

Pentru a avea acces la input, scriem ref-ul nostru ref în atributul ref al input-ului. Astfel, când React va crea nodul DOM pentru acest input, va pune o referință la el în ref.current și vom putea folosi metodele input-ului:

<input ref={ref} />

Și în final, adăugăm funcția de gestionare a click-ului, astfel încât la click pe buton, pe input să se aplice focusul. Acum putem face acest lucru prin ref, în care se află referința la input-ul nostru, accesând metoda sa focus:

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

Apăsați butonul și asigurați-vă că pe input se aplică focusul.

Luați codul componentului App, pe care l-am scris în această lecție și faceți astfel încât la click pe buton în input, pe lângă aplicarea focusului, să se producă și ștergerea câmpului de introducere. Folosiți pentru aceasta proprietatea value a input-ului.