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:

App.jsxreturn (
  <div>
    <input />
      <button>focus</button>
  </div>
);

Na začiatok importujme do komponentu useRef:

App.jsximport { useRef } from 'react';

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

App.jsxconst ref = useRef(null);

Pridajme na tlačidlo obsluhu kliku:

App.jsx<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:

App.jsx<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:

App.jsxfunction handleClick() {
  ref.current.focus();
}

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