Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Créer un Composant de Formulaire Contrôlé | Hooks React et Context pour la Gestion d'État
Maîtrise de React

bookDé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

  1. Importer le hook useRef depuis la bibliothèque react.
  2. À l'intérieur du composant Form, déclarer deux variables useRef : emailRef et passwordRef, initialisées à null.
  3. Réinitialiser les champs de saisie en définissant leur valeur sur une chaîne vide à l'aide des variables useRef.
  1. Pour importer le hook nécessaire depuis la bibliothèque React, inclure une instruction import.
  2. Pour cette tâche, le hook useRef sera utilisé afin de stocker des données sans affecter le balisage.
  3. 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.
  4. Pour initialiser la référence avec null, passer null comme valeur initiale entre les parenthèses du hook useRef (par exemple, useRef(null)).
  5. Pour réinitialiser le champ du formulaire, utiliser la variable de référence appropriée et affecter à sa propriété .current.value une chaîne vide ("").

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.17

bookDé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

  1. Importer le hook useRef depuis la bibliothèque react.
  2. À l'intérieur du composant Form, déclarer deux variables useRef : emailRef et passwordRef, initialisées à null.
  3. Réinitialiser les champs de saisie en définissant leur valeur sur une chaîne vide à l'aide des variables useRef.
  1. Pour importer le hook nécessaire depuis la bibliothèque React, inclure une instruction import.
  2. Pour cette tâche, le hook useRef sera utilisé afin de stocker des données sans affecter le balisage.
  3. 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.
  4. Pour initialiser la référence avec null, passer null comme valeur initiale entre les parenthèses du hook useRef (par exemple, useRef(null)).
  5. Pour réinitialiser le champ du formulaire, utiliser la variable de référence appropriée et affecter à sa propriété .current.value une chaîne vide ("").

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5
some-alt