Exercices Événements & Formulaires
10 exercices pour maîtriser les événements, les inputs contrôlés, la validation et les formulaires React.
Gestionnaire onClick
Tâche : Créez un BoutonCompteur avec un onClick qui incrémente et un bouton onContextMenu qui décrémente.
Input contrôlé
Tâche : Créez un champ texte contrôlé avec value={texte} et onChange={e => setTexte(e.target.value)}. Affichez les transformations en temps réel.
Soumission de formulaire
Tâche : Ajoutez onSubmit sur le <form> avec e.preventDefault() pour éviter le rechargement et afficher un message de confirmation.
Select contrôlé
Tâche : Créez un <select> contrôlé avec value et onChange, affiché avec un tableau d'options rendu par .map().
Checkbox contrôlée
Tâche : Créez une checkbox contrôlée avec checked={newsletter} et onChange={e => setNewsletter(e.target.checked)}.
onFocus et onBlur
Tâche : Créez un champ qui change de style quand il a le focus (onFocus) et valide quand on le quitte (onBlur).
Affichage des erreurs
Tâche : Validez un email et un mot de passe en temps réel et affichez les messages d'erreur conditionnellement avec &&.
Handler générique
Tâche : Créez un handler handleChange générique qui lit e.target.name et met à jour l'objet form avec le spread operator.
Bouton submit désactivé
Tâche : Désactivez le bouton submit avec disabled={!formulaireValide} tant que tous les champs requis ne sont pas valides.
Formulaire complet
Tâche finale : Formulaire de contact complet : state objet, handler générique, validation avant soumission, reset après envoi réussi.
Passer le QCM R05