Ein Ref auf ein Element

Im JavaScript-Kurs hast du Elemente mit querySelector() gefunden und selbst verändert. In React brauchst du das selten: Du beschreibst die Seite mit JSX, und React verändert die Elemente. Ein paar Dinge lassen sich aber nur mit dem Element selbst erledigen. Am häufigsten setzt man mit seiner Methode focus() den Cursor in ein Textfeld, damit der Nutzer gleich lostippen kann.

Dafür hat React Refs (kurz für „Referenz“). Du erzeugst ein Ref mit dem Hook useRef und gibst es dem Element im Attribut ref:

import { useRef } from "react";

export default function TicketName() {
    const nameRef = useRef(null);

    function namenAendern() {
        nameRef.current.focus();
    }

    return (
        <p>
            <input ref={nameRef} />
            <button onClick={namenAendern}>Namen ändern</button>
        </p>
    );
}

useRef(null) gibt ein Objekt mit einer Eigenschaft zurück, current, die zuerst null ist. Sobald React das input auf die Seite setzt, speichert es das Element in nameRef.current. Ab dann ist nameRef.current dasselbe Element, das querySelector() finden würde, und ein Klick auf den Button setzt den Cursor ins Feld.

React füllt das Ref erst, wenn das Element auf der Seite ist. Beim ersten Rendern ist nameRef.current noch null. Verwende Refs deshalb in Handlern und in Effekten, die nach dem Rendern laufen, nie im JSX selbst. Ein Effekt mit [] kann den Cursor ins Feld setzen, sobald die Komponente erscheint:

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

Warum nicht einfach querySelector()? Es durchsucht die ganze Seite, und eine Komponente weiß nicht, was sonst noch darauf ist. Bei zwei Ticketformularen auf einer Seite würde es immer das erste finden. Ein Ref zeigt dagegen immer auf das Element der eigenen Komponente.