Entrées contrôlées ou non contrôlées (introduction)
Comprenez la différence entre les entrées contrôlées (valeur liée à l’état) et les entrées non contrôlées (valeur gérée par le DOM).
Entrées contrôlées ou non contrôlées (introduction) est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Vue d’ensemble
Objectif : comparer les champs contrôlés et non contrôlés. Les champs contrôlés utilisent l’état React comme source de vérité ; les champs non contrôlés laissent cette gestion au DOM.
Champs contrôlés
Champs contrôlés : la valeur est liée à l’état et mise à jour avec onChange. React connaît toujours la dernière valeur.
Démonstration : champ contrôlé
Ce champ est contrôlé : sa valeur vient de l’état et est mise à jour à chaque changement.
<div id="root"></div>
Champs non contrôlés
Champs non contrôlés : le DOM conserve sa propre valeur ; vous pouvez la lire avec des références uniquement lorsque cela est nécessaire.
Démonstration : champ non contrôlé
Ici, le champ est non contrôlé : React ne gère pas sa valeur ; nous la lisons avec une référence lors du clic sur le bouton.
<div id="root"></div>
Conseils et compromis
Conseils :
- Contrôlé = prévisible, l’état React pilote l’interface.
- Non contrôlé = plus simple, mais offrant moins de contrôle.
- Les champs contrôlés sont à privilégier pour les formulaires.
Vérification des champs contrôlés
Résumé
Résumé : les champs contrôlés sont liés à l’état React pour plus de fiabilité. Les champs non contrôlés laissent le DOM gérer les valeurs. Choisissez des champs contrôlés pour la plupart des formulaires.
Questions Fréquemment Posées
La leçon « Entrées contrôlées ou non contrôlées (introduction) » est-elle gratuite ?
Oui — le texte complet de « Entrées contrôlées ou non contrôlées (introduction) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Entrées contrôlées ou non contrôlées (introduction) » ?
Comprenez la différence entre les entrées contrôlées (valeur liée à l’état) et les entrées non contrôlées (valeur gérée par le DOM). Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Entrées contrôlées ou non contrôlées (introduction) » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Principes de useState et mises à jour correctes
- Gestion des événements : onClick et onChange
- Entrées contrôlées ou non contrôlées (introduction)