Was ist der Unterschied zwischen kontrollierten und unkontrollierten Eingaben und wann sollte man welche verwenden?

Gesteuerte Eingabe — ist ein Formularelement, dessen Wert vollständig durch den Zustand der Komponente kontrolliert wird (zum Beispiel in React). Der Wert des Feldes wird im Zustand gespeichert und durch einen Ereignishandler aktualisiert.

Unkontrollierte Eingabe — ist ein Formularelement, das vom DOM selbst verwaltet wird und nicht vom Zustand der Komponente. Der Wert wird bei Bedarf über Referenzen gelesen.

Wann verwenden:

• Gesteuerte Eingabe ist praktisch, wenn sofort auf Änderungen reagiert, Daten validiert oder mit dem Anwendungszustand synchronisiert werden soll.
• Unkontrollierte Eingabe ist einfacher und schneller für einfache Formulare, bei denen keine ständige Kontrolle der Eingabe erforderlich ist.

Beispiel für eine gesteuerte Eingabe in React:

function MyInput() {
  const [value, setValue] = React.useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Beispiel für eine unkontrollierte Eingabe:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Absenden</button>
  </>;
}