Formulaires contrôlés

Apprenez à piloter chaque champ de formulaire depuis l'état React pour valider et soumettre des données fiables.

8 min · 3 questions

En React, un formulaire devient prévisible quand chaque champ est contrôlé : la valeur affichée provient de l'état du composant, et chaque frappe passe par onChange pour mettre cet état à jour. Le DOM n'est plus la source de vérité, c'est votre état qui l'est. Concrètement, vous liez la prop value à une variable d'état et vous fournissez un gestionnaire qui appelle la fonction de mise à jour.

import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

Un vrai formulaire compte rarement un seul champ. Plutôt que de multiplier les useState, regroupez les valeurs dans un objet et écrivez un gestionnaire générique. L'attribut name de chaque champ doit correspondre exactement à une clé de l'objet : c'est lui qui indique quelle propriété mettre à jour.

const [form, setForm] = useState({
  username: "",
  password: "",
});

function handleChange(e) {
  const { name, value } = e.target;
  setForm((prev) => ({ ...prev, [name]: value }));
}

Reste la soumission. Par défaut, le navigateur recharge la page quand un formulaire est envoyé : appelez e.preventDefault() en tête de votre gestionnaire onSubmit. C'est aussi le bon endroit pour valider les données avant de les transmettre, puisque tout l'état du formulaire est déjà sous la main.

function handleSubmit(e) {
  e.preventDefault();
  if (form.username.trim() === "") {
    alert("Le nom d'utilisateur est requis.");
    return;
  }
  console.log("Envoi :", form);
}

return (
  <form onSubmit={handleSubmit}>
    <input
      name="username"
      value={form.username}
      onChange={handleChange}
    />
    <button type="submit">Créer le compte</button>
  </form>
);

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Qu'est-ce qui caractérise un champ contrôlé en React ?
   • Sa valeur est stockée dans le DOM et lue avec une ref
   • Sa valeur provient de l'état et chaque frappe passe par onChange
   • Il est en lecture seule tant que le formulaire n'est pas soumis
   • Il valide automatiquement les données saisies
2. Vous passez value={email} à un <input> sans fournir de onChange. Que se passe-t-il ?
   • Le champ devient figé : la saisie n'a plus aucun effet
   • Le champ fonctionne normalement, React gère la saisie seul
   • Le composant plante dès le premier rendu
3. À quoi sert e.preventDefault() dans le gestionnaire onSubmit ?
   • À empêcher le rechargement de la page déclenché par la soumission native
   • À vider automatiquement les champs du formulaire
   • À bloquer la propagation de l'événement vers les composants parents
   • À désactiver la validation HTML du navigateur