Qual è la differenza tra input controllati e non controllati?

Question

Accepted Answer

Si riduce a **chi è la fonte di verità per il valore dell'input** — lo state di React, o il DOM stesso. ## Input controllati (React possiede il valore) Il `value` dell'input è gestito dallo state, e `onChange` mantiene lo state sincronizzato. Il DOM riflette sempre React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Poiché lo state è la fonte di verità, puoi validare, formattare o trasformare ad ogni pressione di tasto (es. forzare maiuscole, limitare la lunghezza, disabilitare un pulsante di invio). ## Input non controllati (il DOM possiede il valore) Il browser mantiene il valore; lo leggi solo quando necessario tramite un ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Quando usare quale - **Controllati**: la maggior parte dei form — ottieni validazione, UI condizionale e un'unica fonte di verità. Lo svantaggio è un re-render ad ogni pressione di tasto (di solito trascurabile). - **Non controllati**: form semplici, input di file (`` è sempre non controllato), o integrazione di widget non-React. Meno codice, ma non puoi reagire ai cambiamenti mentre accadono. Mischiare i due (passare sia `value` che `defaultValue`) è un errore comune e attiva un avviso di React.