Ref na prvek

V kurzu JavaScriptu jste prvky hledali pomocí querySelector() a měnili je sami. V Reactu to potřebujete jen výjimečně: stránku popíšete v JSX a prvky mění React. Pár věcí ale jde udělat jen se samotným prvkem. Nejčastěji je potřeba dát kurzor do textového pole jeho metodou focus(), aby uživatel mohl hned psát.

K tomu má React refy (z anglického reference, odkaz). Ref vytvoříte hookem useRef a prvku ho dáte v atributu ref:

import { useRef } from "react";

export default function JmenoNaVstupence() {
    const jmenoRef = useRef(null);

    function upravJmeno() {
        jmenoRef.current.focus();
    }

    return (
        <p>
            <input ref={jmenoRef} />
            <button onClick={upravJmeno}>Změnit jméno</button>
        </p>
    );
}

useRef(null) vrátí objekt s jedinou vlastností current, která na začátku obsahuje null. Když React dá input na stránku, uloží prvek do jmenoRef.current. Od té chvíle je v jmenoRef.current stejný prvek, jaký by našla metoda querySelector(), a kliknutí na tlačítko dá kurzor do textového pole.

React ref vyplní, až když je prvek na stránce. Během prvního vykreslení je v jmenoRef.current ještě null. Refy proto používejte v obsluhách událostí a v efektech, které běží až po vykreslení, nikdy přímo v JSX. Efekt s [] dá kurzor do textového pole, hned jak se komponenta objeví:

useEffect(() => {
    jmenoRef.current.focus();
}, []);

Proč ne prostě querySelector()? Tato metoda hledá na celé stránce a komponenta neví, co dalšího na ní je. Se dvěma formuláři na vstupenky na jedné stránce by vždycky našla ten první. Ref vždy ukazuje na vlastní prvek této komponenty.