Quelle est la différence entre les entrées contrôlées et non contrôlées ?

Question

Accepted Answer

Tout dépend de **qui est la source de vérité pour la valeur de l'entrée** — l'état React ou le DOM lui-même. ## Contrôlées (React possède la valeur) La valeur `value` de l'entrée est contrôlée par l'état, et `onChange` maintient l'état synchronisé. Le DOM reflète toujours React : ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Comme l'état est la source de vérité, vous pouvez valider, formater ou transformer à chaque frappe (par exemple forcer les majuscules, limiter la longueur, désactiver un bouton d'envoi). ## Non contrôlées (le DOM possède la valeur) Le navigateur conserve la valeur ; vous la lisez uniquement en cas de besoin via une ref : ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Pourquoi c'est important - **Contrôlées** : la plupart des formulaires — vous obtenez une validation, une interface utilisateur conditionnelle et une source unique de vérité. L'inconvénient est un re-rendu à chaque frappe (généralement négligeable). - **Non contrôlées** : formulaires simples, entrées de fichiers (`` est toujours non contrôlée) ou intégration de widgets non-React. Moins de code, mais vous ne pouvez pas réagir aux changements au fur et à mesure qu'ils se produisent. Les mélanger (en passant à la fois `value` et `defaultValue`) est une erreur courante et déclenche un avertissement React.