Hvordan bygge skjemaer i React ved å bruke React Hook Form

Å bygge skjemaer i en React-applikasjon kan være komplisert og tidkrevende. Ved hjelp av React Hook Form-biblioteket kan du enkelt legge til skjemaer med høy ytelse i React-applikasjonen din.

React Hook Form er et bibliotek for å bygge skjemaer i React som forenkler prosessen med å lage komplekse og gjenbrukbare skjemaer. Hvis du ønsker å bygge en React-app, bør du lære hvordan du bygger skjemaer i React ved å bruke React Hook Form-biblioteket.

Installere React Hook Form

For å begynne å bruke React Hook Form, må du installere det ved å bruke npm eller garnpakkebehandling.

For å installere React Hook Form ved å bruke npm, kjør følgende kommando i terminalen din:

npm installer react-hook-form

For å installere React Hook Form ved hjelp av garn, kjør følgende kommando:

garn tilsett reagere-krok-form

Opprette et skjema ved hjelp av React Hook Form

For å lage et skjema ved hjelp av React Hook Form, må du bruke useForm krok. De useForm

hook gir deg tilgang til metoder og egenskaper som du vil bruke til bygg og administrer skjemaene dine i React-applikasjonen din.

Her er et eksempel som viser hvordan du bruker useForm krok:

import Reagere fra'reagere'
import { useForm } fra'reager-krok-form';
funksjonSkjema() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (data) =>konsoll.log (data);
komme tilbake (



'tekst' { ...registrere("fornavn")} />
Send inn</button>
 </form>
 )
}
eksportmisligholde Form;

React Hook Form-biblioteket bruker registrere metode for å registrere inngangsverdiene til kroken. De registrere metoden kobler inndatafeltene til et skjema til React Hook Form-biblioteket slik at biblioteket kan spore og validere inndatafeltene.

I kodeblokken ovenfor registrerer du en inngang med navnet ‘fornavn.’ handleSend inn metoden til React Hook Form-biblioteket håndterer innsendingen av skjemaet.

For å håndtere innsending av skjema passerer du tilbakeringingsfunksjonen ved innsending til handleSend inn metode. De ved innsending funksjon vil motta et objekt som inneholder verdiene til alle skjemainndataene.

Valider inndata med registermetode

De registrere metoden lar deg sette opp valideringsregler for inndatafeltene dine. For å legge til validering i inndatafeltene dine sender du et objekt med valideringsregler som det andre argumentet til registrere metode.

Som så:

import Reagere fra'reagere'
import { useForm } fra'reager-krok-form';
funksjonSkjema() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (data) =>konsoll.log (data);
komme tilbake (



'tekst' { ...registrere("fornavn", { nødvendig: ekte})} />
'passord' { ...registrere("passord", { nødvendig: ekte, maks lengde: 10})}/>
Send inn</button>
 </form>
 )
}
eksportmisligholde Form;

I dette eksemplet legger du til en valideringsregel i "fornavn"-inndatafeltet og to valideringsregler i "passordet". De nødvendig regelen spesifiserer at brukeren må fylle ut inndatafeltene, og de kan ikke sende inn skjemaet hvis feltene er tomme.

De maks lengde regel angir inngangsverdiens maksimale antall alfabetiske bokstaver. Bortsett fra nødvendig og maks lengde metoder, kan du legge til andre valideringsregler, som f.eks min, maks, minLengde, mønster, og validere.

min og maks

De min regelen angir minimumsverdien for et inndatafelt og maks regelen spesifiserer maksimumsverdien.

Du kan bruke min og maks regler med talltypeinndata, som dette:

'Antall' { ...registrere("alder", {min: 18, maks: 35}) } />

Verdien av inndatafeltet ovenfor må være minst 18 og ikke mer enn 35.

minLengde

De minLengde regelen ligner på maks lengde regel, men angir minimum antall alfabetiske bokstaver i stedet:

'tekst' { ...registrere("Navn", { minLengde: 10 })}/>

I dette eksemplet spesifiserer minLength-regelen at inngangsverdien skal være minst 10 tegn lang.

mønster og valider

De mønster regelen spesifiserer et regulært uttrykksmønster som inndataverdien må samsvare med. De validere regel lar deg definere en egendefinert valideringsfunksjon for å validere inngangsverdien. Funksjonen skal heller returnere ekte eller en strengfeilmelding.

For eksempel:

'tekst' { ...registrere("fornavn", {mønster: **/^[A-Za-z]+$/**}) } />
'Antall' { ...registrere("test", {**validere: (verdi) => verdi <= 12** }) } />

I dette eksemplet bruker "fornavn"-inngangen mønster regel. De mønster krever at inngangsverdien kun inneholder alfabetiske tegn (store og små bokstaver).

"Test"-inngangen bruker validere regel for å definere en egendefinert valideringsfunksjon som sjekker om verdien er mindre enn eller lik 12.

Håndtering av feil i skjemaet ditt

React Hook Form-biblioteket har en innebygd mekanisme for håndtering av JavaScript-feil i skjemaene dine. De handleSend inn funksjon, kalt når brukeren sender inn skjemaet, returnerer et løfte som løser seg med skjemadataene hvis valideringen er vellykket.

Hvis det imidlertid oppstår valideringsfeil, avvises løftet med et feilobjekt som inneholder valideringsfeilene.

Her er et eksempel på hvordan du håndterer feil ved å bruke handleSend inn funksjon:

import Reagere fra'reagere'
import { useForm } fra'reager-krok-form';
funksjonSkjema() {
konst { register, handleSubmit, formState: { errors } } = useForm();
konst onSubmit = (data) =>konsoll.log (data); 
komme tilbake (



'tekst' { ...registrere("fornavn", { nødvendig: ekte})} />
 {errors.firstname && <span>Vennligst skriv inn ditt fornavnspan>}
'Antall' { ...registrere("alder", {min: 18, maks: 35,}) } />
 {errors.age?.type 'maks' && <span> Du er for gammel for denne sidenspan>}
 {errors.age?.type 'min' && <span> Du er for ung for denne sidenspan>}
Send inn</button>
 </form>
 )
}
eksportmisligholde Form;

I denne kodeblokken er formState objektet får tilgang til feilene i hvert felt. De feil objektet lagrer valideringsfeilene for hvert inndatafelt. De feil objekt gjengir betinget en feilmelding for hvert ugyldig felt.

For fornavn inndatafeltet, hvis nødvendig regelen ikke er oppfylt, vises en feilmelding – «Vennligst skriv inn fornavnet ditt» – ved siden av inndatafeltet. Hvis verdien av alder inndatafeltet er utenfor det tillatte området, vil en feilmelding vises.

Hvis verdien er mindre enn 18, vil feilmeldingen være "Du er for ung for dette nettstedet", og hvis verdien er større enn 35, vil feilmeldingen være "Du er for gammel for dette nettstedet".

Nå kan du bygge pålitelige skjemaer i React

Å bygge skjemaer i React kan være en kompleks og tidkrevende prosess. Likevel forenkler React Hook Form denne oppgaven ved å tilby et brukervennlig og fleksibelt bibliotek for administrasjon av skjemadata og validering.

Ved hjelp av useForm-kroken, registermetoden og handleSubmit-metoden blir bygging av skjemaer i React en mer effektiv og strømlinjeformet prosess. Du kan lage funksjonelle skjemaer, som i sin tur forbedrer brukeropplevelsen og den generelle kvaliteten på React-applikasjonene dine.