Uporaba hooka useRef za DOM v Reactu

V eni od prejšnjih lekcij smo omenili, da se refi najpogosteje uporabljajo za dostop do DOM elementov.

Refi bodo prišli na pomoč takrat, ko boste, na primer, želeli fokusirati element, narediti scroll ali izračunati njegovo velikost in pozicijo, ali morda izkoristiti nekatere njegove metode ali lastnosti, saj za takšne stvari v Reactu ni vgrajenih metod.

Poglejmo si na primeru z inputom, kako se to naredi. Ustvarimo komponento z inputom in gumbom:

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

Za začetek, importirajmo v komponento useRef:

import { useRef } from 'react';

In ustvarimo ref ref v komponenti. Inicializirajmo ga z vrednostjo null:

const ref = useRef(null);

Dodajmo gumbu obravnavo klika:

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

Da bomo imeli dostop do inputa, zapišimo naš ref ref v atribut ref inputa. Na ta način, ko bo React ustvarjal DOM vozlišče za ta input, bo postavil povezavo nanj v ref.current in mi bomo lahko uporabljali metode inputa:

<input ref={ref} />

In končno, dodajmo funkcijo za obravnavo klika, da se ob kliku na gumb, na input postavi fokus. Zdaj lahko to naredimo preko refa, v katerem je povezava na naš input, z dostopom do njegove metode focus:

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

Klikajte na gumb in se prepričajte, da se na input postavi fokus.

Vzemite kodo komponente App, ki smo jo napisali v tej lekciji in spremenite jo tako, da ob kliku na gumb v inputu poleg postavitve fokusa pride še do čiščenja polja za vnos. Za to uporabite lastnost value inputa.