Kontrollierte Eingaben

Texteingaben werfen eine Frage auf: Der Benutzer tippt in das Feld, aber deine Komponente hat einen Zustand: Wem gehört der Text? In React lautet die Antwort: Der Zustand besitzt ihn. Das nennt man eine kontrollierte Eingabe:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Zwei Drähte bilden die Schleife:

• value={name}: Das Feld zeigt immer den State an
• onChange: Jeder Tastendruck ruft den Setter mit e.target.value auf, dem aktuellen Text des Feldes

Das Tippen aktualisiert also den State, der State wird neu gerendert und das Eingabefeld zeigt den neuen State an. Der Gewinn: Der Text befindet sich in einer Variablen, die Sie überall sonst auf der Seite validieren, transformieren, leeren oder anzeigen können.