Was ist der Unterschied zwischen kontrollierten und unkontrollierten Eingaben?

Question

Accepted Answer

Es geht darum, **wer die Quelle der Wahrheit für den Wert des Eingabefeldes ist** — React state oder das DOM selbst. ## Kontrolliert (React besitzt den Wert) Der Wert des Eingabefeldes wird durch den State gesteuert und `onChange` hält den State synchron. Das DOM spiegelt immer React wider: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Da der State die Quelle der Wahrheit ist, können Sie bei jedem Tastendruck validieren, formatieren oder transformieren (z. B. Großbuchstaben erzwingen, Länge begrenzen, Absenden-Schaltfläche deaktivieren). ## Unkontrolliert (das DOM besitzt den Wert) Der Browser behält den Wert; Sie lesen ihn nur bei Bedarf über eine ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Warum es wichtig ist - **Kontrolliert**: die meisten Formulare — Sie erhalten Validierung, bedingte UI und eine einzige Informationsquelle. Der Nachteil ist ein re-render pro Tastendruck (normalerweise vernachlässigbar). - **Unkontrolliert**: einfache Formulare, Dateieingaben (`` ist immer unkontrolliert) oder Integration von Non-React-Widgets. Weniger Code, aber Sie können nicht auf Änderungen reagieren, wenn sie auftreten. Beide zu vermischen (sowohl `value` als auch `defaultValue` übergeben) ist ein häufiger Fehler und löst eine React-Warnung aus.