Défi : Créer un Composant de Formulaire Contrôlé
Tâche
Dans ce défi, il s'agit de créer un composant Form avec deux champs de saisie : email et password. L'objectif est d'utiliser le hook useRef pour référencer les éléments d'entrée et gérer la logique de soumission du formulaire.
Instructions
- Importer le hook
useRefdepuis la bibliothèquereact. - À l'intérieur du composant
Form, déclarer deux variablesuseRef:emailRefetpasswordRef, initialisées ànull. - Réinitialiser les champs de saisie en définissant leur valeur sur une chaîne vide à l'aide des variables
useRef.
- Pour importer le hook nécessaire depuis la bibliothèque React, inclure une instruction
import. - Pour cette tâche, le hook
useRefsera utilisé afin de stocker des données sans affecter le balisage. - Pour déterminer le nom de variable approprié pour la référence, choisir un mot associé à la référence et ajouter "Ref" à la fin.
- Pour initialiser la référence avec
null, passernullcomme valeur initiale entre les parenthèses du hookuseRef(par exemple,useRef(null)). - Pour réinitialiser le champ du formulaire, utiliser la variable de référence appropriée et affecter à sa propriété
.current.valueune chaîne vide ("").
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain how to use useRef to reset the input fields?
What should the form submission handler look like?
Can you show how to connect the refs to the input elements?
Génial!
Completion taux amélioré à 2.17
Défi : Créer un Composant de Formulaire Contrôlé
Glissez pour afficher le menu
Tâche
Dans ce défi, il s'agit de créer un composant Form avec deux champs de saisie : email et password. L'objectif est d'utiliser le hook useRef pour référencer les éléments d'entrée et gérer la logique de soumission du formulaire.
Instructions
- Importer le hook
useRefdepuis la bibliothèquereact. - À l'intérieur du composant
Form, déclarer deux variablesuseRef:emailRefetpasswordRef, initialisées ànull. - Réinitialiser les champs de saisie en définissant leur valeur sur une chaîne vide à l'aide des variables
useRef.
- Pour importer le hook nécessaire depuis la bibliothèque React, inclure une instruction
import. - Pour cette tâche, le hook
useRefsera utilisé afin de stocker des données sans affecter le balisage. - Pour déterminer le nom de variable approprié pour la référence, choisir un mot associé à la référence et ajouter "Ref" à la fin.
- Pour initialiser la référence avec
null, passernullcomme valeur initiale entre les parenthèses du hookuseRef(par exemple,useRef(null)). - Pour réinitialiser le champ du formulaire, utiliser la variable de référence appropriée et affecter à sa propriété
.current.valueune chaîne vide ("").
Merci pour vos commentaires !