Kontrollierte Eingaben

Texteingaben werfen eine Frage auf: Der Benutzer tippt etwas in das Feld ein, aber Ihre Komponente hat einen Status (State): Wer besitzt den Text? In React lautet die Antwort: Der State besitzt ihn. Das nennt man einen gesteuerten Input (controlled input):

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.