Utiliser les Refs
15 min
1 exercice
Niveau 8
1. Créer un formulaire avec un focus automatique
- Créez un fichier
MultiStepForm.js
. - Ce composant doit inclure :
- Trois champs
<input>
: Nom, Email, et Téléphone. - Une ref pour chaque champ.
- Trois champs
- Lorsque l'utilisateur appuie sur la touche "Entrée" dans un champ, le curseur doit automatiquement passer au champ suivant.
- Utilisez les refs pour gérer la logique de navigation entre les champs.
2. Vérification et remise à zéro du formulaire
- Ajoutez un bouton "Vérifier et réinitialiser" au composant
MultiStepForm
. - Lorsque ce bouton est cliqué :
- Si tous les champs sont remplis, affichez une alerte "Formulaire valide !".
- Si un champ est vide, mettez-le en surbrillance (par exemple, avec une bordure rouge).
- Réinitialisez tous les champs après 3 secondes.
- Utilisez les refs pour gérer le contenu et l'état visuel des champs.
Rendu attendu (après avoir fait les deux exercices)
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !