Willkommen in Phase 3: Wir bauen jetzt ein echtes Formular – ein Bewertungsformular für unsere Produkte. Bevor wir loslegen, müssen Sie einen grundlegenden Unterschied verstehen: "kontrollierte" gegenüber "unkontrollierten" Formularfeldern.

Kontrollierte Felder: der React-typische Weg

Sie haben kontrollierte Felder in Kapitel 9 schon gesehen (unser Suchfeld), ohne dass wir den Namen genannt haben: der WERT des Feldes kommt aus React-State (value={{...}}), und JEDE Änderung fließt sofort zurück in den State (onChange={{...}}). React "kontrolliert" damit den Feldwert vollständig – das DOM-Element selbst hat praktisch keinen eigenen Zustand mehr.

function KontrolliertesFeld() {
  const [wert, setWert] = useState('');

  return (
    <input
      value={wert}
      onChange={(event) => setWert(event.target.value)}
    />
  );
}

Unkontrollierte Felder: der klassische HTML-Weg

Bei unkontrollierten Feldern überlassen Sie dem DOM-Element selbst, seinen Wert zu verwalten – genau wie in klassischem HTML. Sie lesen den aktuellen Wert nur bei Bedarf aus, meist über eine ref (siehe Kapitel 9):

function UnkontrolliertesFeld() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log('Wert beim Absenden:', inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} defaultValue="" />
      <button type="submit">Absenden</button>
    </form>
  );
}

defaultValue statt value ist hier wichtig: defaultValue setzt nur den ANFANGSWERT, überlässt dem DOM danach aber die Kontrolle – im Gegensatz zu value, das React bei JEDEM Rendern erzwingt.

Direkter Vergleich: wann welches Muster?