React Academy · leksjon

Kom i gang med React Hook Form

Installer RHF, kall useForm, registrer inndatafelter og håndter innsending av skjemaet.

Leksjon 1 av 413 trinn

Kom i gang med React Hook Form er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du installere React Hook Form, kalle useForm, registrere inndatafelt og håndtere skjemainnsendinger uten å administrere individuelle tilstandsvariabler.

Hvorfor React Hook Form?

Tradisjonelle kontrollerte skjemaer i React krever én useState per felt og én onChange per inndatafelt. React Hook Form (RHF) håndterer alt dette internt ved hjelp av ukontrollerte inndatafelt, noe som gir deg et enklere API og færre gjengivelser på nytt.

Installasjon

Installer pakken. Ingen ekstra peer-avhengigheter kreves for grunnleggende bruk.

npm install react-hook-form

useForm-hooken

Kall useForm() for å få register-funksjonen, handleSubmit-wrapperen og formState. Dette er de tre sentrale delene du trenger for ethvert skjema.

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>
  );
}

Registrere inndatafelt

Spre resultatet av register('fieldName') på hvert inndatafelt. RHF kobler en ref og hendelsesbehandlere til inndatafeltet i bakgrunnen — du trenger verken value eller onChange.

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

onSubmit-callbacken

handleSubmit validerer alle felt og kaller onSubmit-callbacken din med et typesatt dataobjekt bare når skjemaet er gyldig. Hvis valideringen mislykkes, fyller den i stedet ut formState.errors.

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

Standardverdier

Send `defaultValues` til useForm for å forhåndsutfylle skjemafelt. Dette er nyttig for redigeringsskjemaer der du laster inn eksisterende data.

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

Egenskaper i formState

formState viser nyttige boolske verdier: `isSubmitting` (true mens handleSubmit kjører), `isDirty` (true hvis et felt er endret), `isValid` (true hvis det ikke finnes feil) og `errors`-objektet.

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

Tilbakestille skjemaet

Kall `reset()` for å tømme alle felt og tilbakestille formState. Du kan også sende inn nye standardverdier.

const { reset } = useForm();

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

Ytelsesfordel

Fordi RHF bruker ukontrollerte inndatafelt, gjengis ikke skjemaet på nytt ved hvert tastetrykk — i motsetning til kontrollerte React-skjemaer. Bare valideringsfeil og innsendingstilstand utløser nye gjengivelser, slik at store skjemaer føles raske.

Hurtigsjekk

Hva gjør handleSubmit(onSubmit) når brukeren sender inn skjemaet?

Besvar den i den interaktive leksjonen

Oppsummering

Installer RHF, kall useForm for å få register og handleSubmit, spre register() på inndatafeltene og pakk innsendingsbehandleren inn i handleSubmit. Angi defaultValues for redigeringsskjemaer og kall reset() etter en vellykket innsending.

Neste

Neste leksjon: **Valideringsregler og feilmeldinger** — du vil bruke innebygde valideringsregler og vise feilmeldinger til brukerne.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Kom i gang med React Hook Form» gratis?

Ja – hele teksten i «Kom i gang med React Hook Form» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kom i gang med React Hook Form»?

Installer RHF, kall useForm, registrer inndatafelter og håndter innsending av skjemaet. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Kom i gang med React Hook Form»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy