Front-end · 6 mondes · 18 étapes
React
Composants, état, effets : des interfaces web qui réagissent, rendues pour de vrai.
Progression
0 %
0/18 étapes terminées
Intermédiaire · 9 min de lecture
Les formulaires contrôlés
L'état comme source de vérité
1Définition
Un champ contrôlé affiche l'état (value) et le met à jour à chaque frappe (onChange). Les cases à cocher utilisent checked et e.target.checked. La soumission passe par onSubmit sur le formulaire, avec e.preventDefault(), une validation, puis la remise à zéro des champs.
2Principes fondamentaux
01
value + onChange
Les deux ensemble, toujours.
02
onSubmit sur le form
Il couvre le bouton et la touche Entrée.
03
preventDefault
Sinon le navigateur recharge la page.
04
Valider au moment d'agir
Un bouton désactivé guide, il ne garantit rien.
3Exemples pratiques
Un objet pour plusieurs champs
1const [form, setForm] = useState({ pseudo: "", email: "" });2 3<input name="pseudo" value={form.pseudo}4 onChange={(e) => setForm({ ...form, [e.target.name]: e.target.value })} />Un seul gestionnaire pour tous les champs, grâce à l'attribut name.
Les actions de formulaire (React 19)
1<form action={async (donnees) => {2 await inscrire(donnees.get("pseudo"));3}}>React 19 accepte une fonction en action : pratique avec les actions serveur de Next.js.
4Erreurs courantes
value sans onChange
À éviter
<input value={pseudo} />À faire
<input value={pseudo} onChange={…} />Pourquoi : Le champ paraît bloqué.
onClick sur le bouton
À éviter
<button onClick={envoyer}>À faire
<form onSubmit={envoyer}>Pourquoi : La touche Entrée serait ignorée.
value pour une case
À éviter
<input type="checkbox" value={ok} />À faire
checked={ok} onChange={(e) => setOk(e.target.checked)}Pourquoi : Une case se contrôle par checked.
5Subtilités à connaître
- ◆
e.target.valueest toujours un texte, même pourtype="number". - ◆Un
<button>dans un<form>soumet par défaut :type="button"pour un bouton qui ne doit pas. - ◆La validation côté client aide l'utilisateur ; celle côté serveur protège les données.
6Vérifie ta compréhension
Question 1/3
Score 0
e.target.value dans onChange :
Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.