Vad är skillnaden mellan styrda och ostyrda inmatningar?

Question

Accepted Answer

Det handlar om **vem som är sanningskällan för inmatningens värde** — React state eller DOM:en själv. ## Varför det spelar roll ### Styrda (React äger värdet) Inmatningens `value` styrs av state, och `onChange` håller state synkroniserad. DOM återspeglar alltid React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Eftersom state är sanningskällan kan du validera, formatera eller transformera på varje tangenttryckning (t.ex. tvinga versaler, begränsa längd, inaktivera en skicka-knapp). ### Ostyrda (DOM äger värdet) Webbläsaren behåller värdet; du läser det bara när det behövs via en ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## När du använder vilken - **Styrda**: de flesta formulär — du får validering, villkorlig UI och en enda sanningskälla. Nackdelen är en omritning per tangenttryckning (vanligtvis försumbar). - **Ostyrda**: enkla formulär, filinmatningar (`` är alltid ostyrda), eller integrering av icke-React-komponenter. Mindre kod, men du kan inte reagera på ändringar när de sker. Att blanda dem (skicka både `value` och `defaultValue`) är ett vanligt misstag och utlöser en React-varning.