Je gaat een React formulier maken met controlled components! Hiervoor maak je gebruik van de React useState hook.
In jouw formulier komen de volgende inputs te staan:
- Naam - tekstveld
- Leeftijd - getalveld
- Opmerkingen - tekstareaveld
- Inschrijven voor de nieuwsbrief - checkbox
- Versturen-knop (van type
submit
)
Dit project is opgezet met behulp van Create React App.
Als je het project gecloned hebt naar jouw locale machine, installeer je eerst de node_modules
door het volgende
commando in de terminal te runnen:
npm install
Wanneer dit klaar is, kun je de applicatie starten met behulp van:
npm start
of gebruik de WebStorm knop (npm start). Open http://localhost:3000 om de pagina in de browser te bekijken. Begin met
het maken van wijzigingen in src/App.js
: elke keer als je een bestand opslaat, zullen de wijzigingen te zien zijn op
de webpagina.
- Maak alle invoervelden na en zorg dat dit controlled components zijn;
- Zorg ervoor dat wanneer de gebruiker op de versturen-knop klikt, een functie genaamd
handleSubmit
" wordt aangeroepen die 'Verstuurd!' in de console logt. Tip 1: zet geenonClick
eventlistener op de button, maar eenonSubmit
event-listener op het<form>
-element! Deze wordt automatisch getriggerd wanneer er geklikt wordt op een button mettype=submit
in het formulier. Tip 2: Omdat de button in het formulier eensubmit
button is, zal de pagina automatisch herladen wanneer je erop klikt. Zorg dat je dit voorkomt. Tip: lees dit artikel overpreventDefault()
in React. - Probeer nu, in plaats van 'Verstuurd!', alle ingevulde waardes in de console te loggen wanneer de
handleSubmit
functie wordt aangeroepen. - Bonus: Make it look nice! 😍
- Bonus: Snel klaar met deze opdracht en opzoek naar een extra uitdaging? Het is mogelijk (en in de parktijk ook
gebruikelijk) om slechts één functie en één state variabele te gebruiken waarmee álle
onChange
listeners worden afgevangen. Als je hier mee wil experimenteren kun je dit artikel gebruiken als leidraad. Lees het artikel grondig door. De antwoorden voor deze aanpak staan op de branch _ uitwerkingen-bonus_.