Hva er forskjellen mellom kontrollerte og ukontrollerte input-felter?

Question

Accepted Answer

Det kommer ned til **hvem som er kilden til sannhet for input-feltets verdi** — React-tilstand, eller DOM-en selv. ## Kontrollerte (React eier verdien) Input-feltets `value` styres av tilstand, og `onChange` holder tilstanden synkronisert. DOM gjenspeiler alltid React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Fordi tilstand er kilden til sannhet, kan du validere, formatere eller transformere ved hver tast-trykking (f.eks. tvinge store bokstaver, begrense lengde, deaktivere en send-knapp). ## Ukontrollerte (DOM eier verdien) Nettleseren holder verdien; du leser den bare når det er nødvendig via en ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Når du skal bruke hvilken - **Kontrollert**: de fleste skjemaer — du får validering, betinget UI og en enkelt kilde til sannhet. Ulempen er en re-rendering per tast-trykking (vanligvis ubetydelig). - **Ukontrollert**: enkle skjemaer, fil-input (`` er alltid ukontrollert), eller integrering av ikke-React-widgets. Mindre kode, men du kan ikke reagere på endringer mens de skjer. Å blande dem (å sende både `value` og `defaultValue`) er en vanlig feil og utløser en React-advarsel.