Koks yra skirtumas tarp kontroliuojamų ir nekontroliuojamų įvesties laukų?

Question

Accepted Answer

Tai susiję su tuo, **kas yra tiesos šaltinis įvesties reikšmei** — React state ar pats DOM. ## Kontroliuojama (React valdo reikšmę) Įvesties `value` yra valomas state, o `onChange` leidžia state likti sinchronizuotam. DOM visada atspindi React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Kadangi state yra tiesos šaltinis, galite patikrinti, formatuoti ar transformuoti kiekvieno mygtuko paspaudimo metu (pvz. priverstinai padaryti didžiąsias raides, apriboti ilgį, išjungti submit mygtuką). ## Nekontroliuojama (DOM valdo reikšmę) Browseris saugo reikšmę; jūs ją skaitote tik kai reikia per ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kada naudoti kurią - **Kontroliuojama**: daugiau formų — jūs gausite patikrinimą, sąlyginę UI ir vieną tiesos šaltinį. Neigiama pusė yra perrašymas per kiekvieną mygtuko paspaudimą (paprastai nereikšminga). - **Nekontroliuojama**: paprastos formos, failų įvestis (`` visada nekontroliuojama), arba integruojant ne-React valdiklius. Mažiau kodo, bet negalite reaguoti į pakeitimus, kai jie vyksta. Jų maišymas (perduodant tiek `value`, tiek `defaultValue`) yra dažna klaida ir sukelti React perspėjimą.