Upotreba hook-a useRef za DOM u React-u

Na jednom od prethodnih časova smo pomenuli da se refovi najčešće koriste za pristup DOM elementima.

Refovi će vam doći u pomoć onda kada vam, na primer, treba da fokusirate element, izvršite skrol ili izračunate njegove dimenzije i poziciju, a možda i da iskoristite neke njegove metode ili osobine, jer za takve stvari u React-u ne postoje ugrađene metode.

Hajde da pogledamo na primeru sa input-om, kako se to radi. Kreiramo komponentu sa input-om i dugmetom:

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

Za početak, importujemo u komponentu useRef:

App.jsximport { useRef } from 'react';

I napravićemo ref ref u komponenti. Inicijalizovaćemo ga vrednošću null:

App.jsxconst ref = useRef(null);

Dodaćemo dugmetu handler klika:

App.jsx<button onClick={handleClick}>focus</button>

Da bismo imali pristup input-u, upisaćemo naš ref ref u atribut ref input-a. Tako, kada React bude kreirao DOM čvor za ovaj input, on će staviti referencu na njega u ref.current i mi ćemo moći da koristimo metode input-a:

App.jsx<input ref={ref} />

I na kraju, dodajemo funkciju za obradu klika, tako da prilikom klika na dugme, na input bude postavljen fokus. Sada možemo to da uradimo preko ref-a, u kojem se nalazi referenca na naš input, pristupajući njegovoj metodi focus:

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

Pritisnite dugme i uverite se da se na input postavlja fokus.