Kontrollierte Felder

Über Formulare sprechen Nutzer mit einer App: Sie tippen einen Namen, wählen ein Ticket, setzen ein Häkchen. In dieser Lektion baust du Schritt für Schritt das Ticket-Bestellformular von Sommerklang.

Im JavaScript-Kurs steckte der Text eines Feldes im Element, und du hast seinen value gelesen, wenn du ihn brauchtest. In React lebt der Text eines Feldes im State, wie alles andere auf der Seite, das sich ändert. Das Feld zeigt den State, und jede Taste, die der Nutzer drückt, ändert ihn:

import { useState } from "react";

export default function App() {
    const [name, setName] = useState("");

    return (
        <main>
            <label htmlFor="name">Dein Name</label>
            <input
                id="name"
                value={name}
                onChange={(event) => setName(event.target.value)}
            />
            <p>Hallo, {name}!</p>
        </main>
    );
}

Das passiert, wenn der Nutzer A tippt:

1. Das Feld bekommt das Ereignis, und React ruft onChange auf. event.target.value kennst du aus der Lektion Ereignisse: Es ist der Text im Feld, jetzt "A".
2. setName("A") ändert den State, und React rendert App erneut.
3. Im neuen Rendern ist name gleich "A", also zeigt das Feld A und die Begrüßung darunter auch.

Ein Feld, dessen Text so aus dem State kommt, ist ein kontrolliertes Feld: Sein value ist immer das, was der State sagt. Das bringt dir zwei Dinge. Die Seite kann zeigen, was getippt wird, während es getippt wird, überall, nicht nur im Feld. Und dein Code kann den Text des Feldes ändern: setName("") leert es, ganz ohne querySelector.

Typischer Fehler:

• useState() ohne Startwert. Das Feld beginnt dann mit undefined, was React als ein Feld versteht, das es nicht kontrolliert, und sobald du tippst, warnt die Konsole: A component is changing an uncontrolled input to be controlled. Beginne den State eines Textfeldes mit "", einem leeren Text.