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
Introduction à 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

Suggested prompts:

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?

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