javascript / beginner
Snippet
Kontrollierte Eingabefelder (Zwei-Wege-Bindung)
Bei einer kontrollierten Komponente wird ihr Wert durch den React-State gesteuert. Die 'value'-Prop setzt den aktuellen Text und 'onChange' aktualisiert den State, wann immer der Benutzer tippt, wodurch UI und State synchron bleiben.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
function NameForm() {const [name, setName] = useState('');return (<inputtype="text"value={name}onChange={(e) => setName(e.target.value)}/>);}
react
Erklärung
1
value={name}
Verknüpft den angezeigten Wert des Eingabefeldes mit der State-Variable 'name'.
2
onChange={(e) => setName(e.target.value)}
Ein Event-Handler, der die Benutzereingabe aus dem Event-Objekt erfasst und den State aktualisiert.