Hvad er forskellen mellem kontrollerede og ukontrollerede inputfelter?

Question

Accepted Answer

Det kommer ned til **hvem der er kilden til sandheden for inputfeltets værdi** — React state eller selve DOM. ## Kontrollerede (React ejer værdien) Inputfeltets `value` styres af state, og `onChange` holder state synkroniseret. DOM afspejler altid React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Fordi state er kilden til sandheden, kan du validere, formatere eller transformere ved hver tastetryk (f.eks. tvinge versaler, begrænse længde, deaktivere en indsend-knap). ## Ukontrollerede (DOM ejer værdien) Browseren holder værdien; du læser den kun når det er nødvendigt via en ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Hvornår bruges hvilke - **Kontrollerede**: de fleste formularer — du får validering, betinget UI og en enkelt sandhedskildes. Ulempen er en re-render ved hver tastetryk (normalt ubetydeligt). - **Ukontrollerede**: simple formularer, fileinput (`` er altid ukontrolleret) eller integrering af non-React-widgets. Mindre kode, men du kan ikke reagere på ændringer, når de sker. At blande dem (ved at sende både `value` og `defaultValue`) er en almindelig fejl og udløser en React-advarsel.