Mikä on ero hallittujen ja hallitsemattomien syöttökenttien välillä?

Question

Accepted Answer

Se johtuu siitä, **kuka on syöttökentän arvon totuuden lähde** — React state vai itse DOM. ## Hallitut (React omistaa arvon) Syöttökentän `value` ohjataan state-arvolla ja `onChange` pitää state-arvon synkronoituna. DOM heijastaa aina React-arvoa: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Koska state on totuuden lähde, voit validoida, muotoilla tai muuntaa jokaisella näppäimen painalluksella (esim. pakottaa isot kirjaimet, rajoittaa pituutta, poistaa lähetyspainike käytöstä). ## Hallitsemattomat (DOM omistaa arvon) Selain säilyttää arvon; luet sen vain tarvittaessa ref:n kautta: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Milloin käytetään kumpaa - **Hallitut**: useimmat lomakkeet — saat validoinnin, ehdollisen käyttöliittymän ja yhden totuuden lähteen. Haittapuoli on uudelleenpiirto jokaisella näppäimen painalluksella (yleensä merkityksetön). - **Hallitsemattomat**: yksinkertaiset lomakkeet, tiedostojen syöttö (`` on aina hallitsematon) tai non-React-widgetien integroiminen. Vähemmän koodia, mutta et voi reagoida muutoksiin niiden tapahdtuessa. Niiden sekoittaminen (sekä `value` että `defaultValue` välittäminen) on yleinen virhe ja laukaisee React-varoituksen.