Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Uitdaging: Bouw een Gecontroleerd Formuliercomponent | React Hooks en Context voor Statusbeheer
React Mastery

bookUitdaging: Bouw een Gecontroleerd Formuliercomponent

Taak

In deze uitdaging maak je een Form-component met twee invoervelden: email en password. Het doel is om de useRef-hook te gebruiken om te verwijzen naar de inputelementen en de logica voor het indienen van het formulier af te handelen.

Instructies

  1. Importeer de useRef-hook uit de react-bibliotheek.
  2. Declareer binnen de Form-component twee useRef-variabelen: emailRef en passwordRef, geïnitialiseerd met null.
  3. Reset de invoervelden door hun waarden op een lege string te zetten met behulp van de useRef-variabelen.
  1. Om de benodigde hook uit de React-bibliotheek te importeren, voeg een import-statement toe.
  2. Voor deze taak gebruiken we de useRef-hook om gegevens op te slaan zonder de markup te beïnvloeden.
  3. Kies voor de naam van de ref-variabele een woord dat gerelateerd is aan de ref en voeg "Ref" toe aan het einde.
  4. Om de ref te initialiseren met null, geef je null als initiële waarde mee in de haakjes van de useRef-hook (bijvoorbeeld useRef(null)).
  5. Om de formulierinvoer te resetten, gebruik je de juiste ref-variabele en wijs je de .current.value toe aan een lege string ("").

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 5

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.17

bookUitdaging: Bouw een Gecontroleerd Formuliercomponent

Veeg om het menu te tonen

Taak

In deze uitdaging maak je een Form-component met twee invoervelden: email en password. Het doel is om de useRef-hook te gebruiken om te verwijzen naar de inputelementen en de logica voor het indienen van het formulier af te handelen.

Instructies

  1. Importeer de useRef-hook uit de react-bibliotheek.
  2. Declareer binnen de Form-component twee useRef-variabelen: emailRef en passwordRef, geïnitialiseerd met null.
  3. Reset de invoervelden door hun waarden op een lege string te zetten met behulp van de useRef-variabelen.
  1. Om de benodigde hook uit de React-bibliotheek te importeren, voeg een import-statement toe.
  2. Voor deze taak gebruiken we de useRef-hook om gegevens op te slaan zonder de markup te beïnvloeden.
  3. Kies voor de naam van de ref-variabele een woord dat gerelateerd is aan de ref en voeg "Ref" toe aan het einde.
  4. Om de ref te initialiseren met null, geef je null als initiële waarde mee in de haakjes van de useRef-hook (bijvoorbeeld useRef(null)).
  5. Om de formulierinvoer te resetten, gebruik je de juiste ref-variabele en wijs je de .current.value toe aan een lege string ("").

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 5
some-alt