08

Formulaires

Controlled Components

Le concept : Habituellement, le DOM gère son propre état dans les formulaires (ce que l'utilisateur tape reste dans le champ input). Dans React, l'approche recommandée est celle des Composants Contrôlés. Le State de React devient "l'unique source de vérité" : il dicte la valeur du champ, et chaque frappe de clavier met à jour le State, qui remet à jour le champ instantanément.

onChange value = state State Hello "Hello"
💡 Single Source of Truth

Dans un formulaire HTML classique, l'input garde son propre état interne. En React, on veut que le State soit la seule source de vérité.

C'est le pattern "Composant Contrôlé" :

  1. L'input affiche la valeur du State (value={state}).
  2. L'input déclenche un changement (onChange).
  3. Le handler met à jour le State (setState).
  4. React re-render l'input avec la nouvelle valeur.
Input contrôlé
function Form() {
    const [text, setText] = useState("");

    return (
        <input
            type="text"
            value={ text }  // Source de vérité = State
            onChange={ e => setText(e.target.value) }
        />
    );
}
Plusieurs champs (Objet)
const [form, setForm] = useState({ email: "", password: "" });

const handleChange = (e) => {
    // Met à jour uniquement la clé correspondante (name="email" ou "password")
    setForm({ 
        ...form, 
        [e.target.name]: e.target.value 
    });
};

// <input name="email" value={form.email} onChange={handleChange} />
Validation Simple
const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
        setError("Email invalide");
        return;
    }
    // Envoi des données...
};

🚀 Quick Tip : Uncontrolled

Pour des formulaire très simples ou l'intégration de librairies non-React, vous pouvez utiliser useRef pour lire la valeur seulement à la soumission, sans re-render à chaque frappe.

const inputRef = useRef();
// Accès : inputRef.current.value

📝 Analogie : Formulaire Papier vs Tablette

Uncontrolled (HTML classique) : Vous remplissez un formulaire papier. Personne ne vérifie rien tant que vous ne l'avez pas rendu au guichet (Submit).
Controlled (React State) : Une tablette qui vérifie chaque champ pendant que vous tapez (rouge si erreur, vert si bon). C'est plus de code, mais une meilleure UX.

Advanced : Libraries
// Pour les GROS formulaires, Controlled est lent.
// Utilisez "React Hook Form" (Uncontrolled + Hooks).

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm();
<input {...register("email")} />
← Lists Suivant : Hooks Rules →