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

javascript

function NameForm() {
  const [name, setName] = useState('');
 
  return (
    <input 
      type="text" 
      value={name} 
      onChange={(e) => setName(e.target.value)} 
    />
  );
}

react

Erklärung

value={name}

Verknüpft den angezeigten Wert des Eingabefeldes mit der State-Variable 'name'.

onChange={(e) => setName(e.target.value)}

Ein Event-Handler, der die Benutzereingabe aus dem Event-Objekt erfasst und den State aktualisiert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Kontrollierte Eingabefelder (Zwei-Wege-Bindung)

Verwandt