Kakšna je razlika med kontroliranimi in nekontroliranimi vhodi?

Question

Accepted Answer

Gre za to, **kdo je vir resnice za vrednost vhoda** — React state ali sam DOM. ## Kontrolirani vhodi (React je lastnik vrednosti) Vrednost `value` vhoda je namenjena state, in `onChange` drži state sinhroniziran. DOM vedno odraža React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Ker je state vir resnice, lahko potrjujete, oblikujete ali transformirate pri vsakem tipkanju (npr. prisilite velike črke, omejite dolžino, onemogočite gumb za pošiljanje). ## Nekontrolirani vhodi (DOM je lastnik vrednosti) Browser hrani vrednost; jo preberete samo po potrebi prek ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kdaj uporabiti kaj - **Kontrolirani**: večina obrazcev — dobite validacijo, pogojni UI in en vir resnice. Slabost je ponovni prikaz pri vsakem tipkanju (običajno zanemarljivo). - **Nekontrolirani**: preprosti obrazci, vhodi datotek (`` je vedno nekontroliran) ali integracija ne-React gradnikov. Manj kode, vendar ne morete reagirati na spremembe, ko se dogajajo. Mešanje obeh (posredovanje tako `value` kot `defaultValue`) je pogosta napaka in sprožи React opozorilo.