React Academy · Les

Aan de slag met React Hook Form

Installeer RHF, roep useForm aan, registreer inputs en verwerk formulierverzendingen.

Les 1 van 413 stappen

Aan de slag met React Hook Form is een gratis React Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les installeer je React Hook Form, roep je useForm aan, registreer je invoervelden en verwerk je formulierverzendingen zonder afzonderlijke statusvariabelen te beheren.

Waarom React Hook Form?

Traditionele formulieren met gecontroleerde invoervelden in React vereisen één useState per veld en één onChange per invoerveld. React Hook Form (RHF) beheert dit intern met ongecontroleerde invoervelden, waardoor je een eenvoudigere API met minder her-renderingen krijgt.

Installatie

Installeer het pakket. Voor basisgebruik zijn geen aanvullende afhankelijkheden vereist.

npm install react-hook-form

De useForm-hook

Roep useForm() aan om de functie register, de wrapper handleSubmit en formState te krijgen. Dit zijn de drie belangrijkste onderdelen die je voor elk formulier nodig hebt.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Invoervelden registreren

Verspreid het resultaat van register('fieldName') over elk invoerveld. RHF koppelt onderliggend een ref en gebeurtenishandlers aan het invoerveld — value of onChange is niet nodig.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

De onSubmit-callback

handleSubmit valideert alle velden en roept je onSubmit-callback aan met een getypeerd gegevensobject, maar alleen wanneer het formulier geldig is. Als de validatie mislukt, vult handleSubmit in plaats daarvan formState.errors in.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Standaardwaarden

Geef `defaultValues` door aan useForm om formuliervelden vooraf in te vullen. Dit is handig voor bewerkingsformulieren waarvoor je bestaande gegevens laadt.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Eigenschappen van formState

formState biedt nuttige booleaanse waarden: `isSubmitting` (true terwijl handleSubmit wordt uitgevoerd), `isDirty` (true als een veld is gewijzigd), `isValid` (true als er geen fouten zijn) en het object `errors`.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Het formulier resetten

Roep `reset()` aan om alle velden te wissen en formState opnieuw in te stellen. Je kunt optioneel nieuwe standaardwaarden meegeven.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Prestatievoordeel

Omdat RHF ongecontroleerde invoervelden gebruikt, wordt het formulier niet bij elke toetsaanslag opnieuw gerenderd — anders dan formulieren met gecontroleerde invoervelden in React. Alleen validatiefouten en de status van de verzending veroorzaken nieuwe renderingen, waardoor grote formulieren snel blijven reageren.

Korte controle

Wat doet het aanroepen van handleSubmit(onSubmit) wanneer de gebruiker het formulier verzendt?

Beantwoord dit in de interactieve les

Samenvatting

Installeer RHF, roep useForm aan om register en handleSubmit te krijgen, verspreid register() over de invoervelden en wikkel je handler voor verzenden in handleSubmit. Stel defaultValues in voor bewerkingsformulieren en roep reset() aan na een geslaagde verzending.

Hierna

Volgende les: **Validatieregels en foutmeldingen** — je past ingebouwde validatieregels toe en toont foutmeldingen aan gebruikers.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Aan de slag met React Hook Form” gratis?

Ja — de volledige tekst van “Aan de slag met React Hook Form” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Aan de slag met React Hook Form”?

Installeer RHF, roep useForm aan, registreer inputs en verwerk formulierverzendingen. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Aan de slag met React Hook Form”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar React Academy