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:

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

Za početak, importujemo u komponentu useRef:

import { useRef } from 'react';

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

const ref = useRef(null);

Dodaćemo dugmetu handler klika:

<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:

<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:

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

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

Uzmite kod komponente App, koju smo napisali u ovoj lekciji i učinite tako da prilikom klika na dugme u input-u, pored postavljanja fokusa, još i da se obriše polje za unos. Iskoristite za to osobinu value input-a.