UseRef hoko panaudojimas DOM React'e

Vienoje iš ankstesnių pamokų minėjome, kad refai dažniausiai naudojami prieigai prie DOM elementų.

Refai ateis į pagalbą tada, kai jums, pavyzdžiui, reikia sufokusuoti elementą, atlikti scroll'ą arba apskaičiuoti jo dydį ir poziciją, arba galbūt panaudoti kai kuriuos jo metodus ar savybes, juk React'e tokiems dalykams nėra įmontuotų metodų.

Pažiūrėkime pavyzdžiu su input'u, kaip tai daroma. Sukurkime komponentą su input'u ir mygtuku:

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

Pirmiausia, importuokime į komponentą useRef:

import { useRef } from 'react';

Ir sukurkime ref'ą ref komponente. Inicializuokime jį reikšme null:

const ref = useRef(null);

Uždėkime ant mygtuko click'o apdorotoją:

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

Kad turėtume prieigą prie input'o, įrašykime mūsų ref'ą ref į input'o atributą ref. Taip, kai React kurs DOM mazgą šiam input'ui, jis padės nuorodą į jį į ref.current ir mes galėsime naudotis input'o metodais:

<input ref={ref} />

Ir galiausiai, pridėkime click'o apdorojimo funkciją, kad paspaudus mygtuką, ant input'o būtų nukreiptas fokusas. Dabar mes galime tai padaryti per ref'ą, kuriame yra nuoroda į mūsų input'ą, kreipdamiesi į jo metodą focus:

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

Paspauskite mygtuką ir įsitikinkite, kad ant input'o nukreipiamas fokusas.

Paimkite komponento App kodą, kurį parašėme šioje pamokoje ir padarykite taip, kad paspaudus mygtuką input'e, be fokusavimo, atsitiktų ir įvesties lauko išvalymas. Pasinaudokite tam input'o savybe value.