Použitie hooku useRef pre DOM v Reacte

V jednej z predchádzajúcich lekcií sme spomenuli, že refy sa najčastejšie používajú na prístup k DOM elementom.

Refy prídu na pomoc vtedy, keď potrebujete, napríklad, zamerať sa na element, vykonať scroll alebo vypočítať jeho veľkosť a pozíciu, alebo možno použiť niektoré z jeho metód alebo vlastností, pretože na takéto veci v Reacte nie sú vstavané metódy.

Pozrime sa na príklad so vstupným poľom, ako sa to robí. Vytvorme komponent s vstupným poľom a tlačidlom:

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

Na začiatok importujme do komponentu useRef:

import { useRef } from 'react';

A vytvorme ref ref v komponente. Inicializujme ho hodnotou null:

const ref = useRef(null);

Pridajme na tlačidlo obsluhu kliku:

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

Aby sme mali prístup k vstupnému poľu, zapíšme náš ref ref do atribútu ref vstupného poľa. Týmto spôsobom, keď React bude vytvárať DOM uzol pre toto vstupné pole, uloží odkaz naň do ref.current a my budeme môcť používať metódy vstupného poľa:

<input ref={ref} />

A nakoniec, pridajme funkciu na obsluhu kliku, aby sa pri kliknutí na tlačidlo na vstupné pole zamerialo. Teraz to môžeme urobiť cez ref, v ktorom je odkaz na naše vstupné pole, prístupom k jeho metóde focus:

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

Klikajte na tlačidlo a presvedčte sa, že sa na vstupné pole zameriava.

Vezmite kód komponentu App, ktorý sme napísali v tejto lekcii a urobte to tak, aby pri kliknutí na tlačidlo vo vstupnom poli okrem zamerania došlo aj k vymazaniu poľa. Využite na to vlastnosť value vstupného poľa.