Care este diferența dintre inputurile controlate și necontrolate?

Question

Accepted Answer

Se rezumă la **cine este sursa adevărului pentru valoarea inputului** — starea React, sau DOM-ul însuși. ## Controlate (React deține valoarea) Valoarea inputului este determinată de stare, iar `onChange` ține starea sincronizată. DOM-ul reflectă întotdeauna React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Deoarece starea este sursa adevărului, puteți valida, formata sau transforma la fiecare apăsare de tastă (de exemplu, forțați majuscule, limitați lungimea, dezactivați butonul de trimitere). ## Necontrolate (DOM-ul deține valoarea) Browserul ține valoarea; o citiți doar atunci când este necesar via o referință: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Când să folosiți care - **Controlate**: majoritatea formularelor — obțineți validare, interfață condiționată și o singură sursă de adevăr. Dezavantajul este o re-randare pe fiecare apăsare de tastă (de obicei neglijabil). - **Necontrolate**: formularele simple, inputurile de fișiere (`` este întotdeauna necontrolat), sau integrarea widget-urilor non-React. Mai puțin cod, dar nu puteți reacționa la schimbări pe măsură ce se întâmplă. Amestecarea lor (transmiterea atât a `value` cât și a `defaultValue`) este o greșeală comună și declanșează un avertisment React.