Snippet

Verwalten von Formulareingaben mit dem Controlled-Component-Muster

Das Controlled-Component-Muster speichert Formularfeldwerte direkt im React-Komponenten-State. Anstatt dem DOM die Verwaltung des Eingabewerts zu überlassen, wird das value-Attribut an eine State-Variable gebunden und bei jedem Tastenanschlag über den onChange-Event-Handler synchron aktualisiert.

snippet.js

javascript

import { useState } from 'react';
 
export function UsernameInput() {
  const [username, setUsername] = useState('');
 
  return (
    <input
      type="text"
      value={username}
      onChange={(e) => setUsername(e.target.value)}
      placeholder="Enter username"
    />
  );
}

react

Erklärung

const [username, setUsername] = useState('');

Deklariert eine String-State-Variable, die mit einem leeren String initialisiert wird.

value={username}

Bindet den angezeigten Text des Eingabeelements direkt an den aktuellen State-Wert.

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

Fängt das Eingabeänderungsereignis ab und aktualisiert den String-State mit dem neu eingegebenen Text.

Vorheriges Snippet Nächstes Snippet

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

Verwalten von Formulareingaben mit dem Controlled-Component-Muster

Verwandt