Koja je razlika između kontroliranih i nekontroliranih inputa?

Question

Accepted Answer

Sve se svodi na **tko je izvor istine za vrijednost inputa** — React state ili sam DOM. ## Kontrolirani (React posjeduje vrijednost) Vrijednost inputa je vođena stateom, a `onChange` drži state sinhroniziranim. DOM uvijek odražava React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Budući da je state izvor istine, možete validirati, formatirati ili transformirati pri svakom pritisku tipke (npr. forsirati velika slova, ograničiti duljinu, onemogućiti dugme slanja). ## Nekontrolirani (DOM posjeduje vrijednost) Preglednik čuva vrijednost; čitate je samo kada je potrebno putem refa: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kada koristiti koji - **Kontrolirani**: većina formi — dobivate validaciju, uvjetni UI i jedan izvor istine. Nedostatak je ponovno renderiranje pri svakom pritisku tipke (obično zanemarivo). - **Nekontrolirani**: jednostavne forme, file inputi (`` je uvijek nekontroliran) ili integracija ne-React widgeta. Manje koda, ali ne možete reagirati na promjene dok se događaju. Miješanje njih (prosljeđivanje i `value` i `defaultValue`) je česta greška i aktivira React upozorenje.