Gestion des formulaires en React

La gestion des formulaires en React englobe l’ensemble des techniques pour capturer, valider, stocker et soumettre les données saisies par un utilisateur.

Elle repose principalement sur deux approches : les composants contrôlés (recommandé) et les composants non-contrôlés.

Les 2 approches principales

Exemple de formulaire contrôlé

function FormulaireInscription() {
  const [formData, setFormData] = useState({
    nom: '',
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});

  // Gestion des changements
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    // Validation en temps réel
    if (name === 'email' && !value.includes('@')) {
      setErrors(prev => ({ ...prev, email: 'Email invalide' }));
    } else {
      setErrors(prev => ({ ...prev, email: null }));
    }
  };

  // Gestion de la soumission
  const handleSubmit = async (e) => {
    e.preventDefault();
    // Validation finale
    if (Object.keys(errors).length > 0) return;
    
    try {
      await fetch('/api/inscription', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
    } catch (err) {
      console.error('Erreur:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="nom"
        value={formData.nom}
        onChange={handleChange}
        placeholder="Nom"
      />
      
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      {errors.email && <span className="error">{errors.email}</span>}
      
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Mot de passe"
      />
      
      <button type="submit">S'inscrire</button>
    </form>
  );
}

Bibliothèques spécialisées

Pour les formulaires complexes, des librairies externes simplifient la gestion :