Sådan bygger du formularer i React ved hjælp af React Hook Form

Opbygning af formularer i en React-applikation kan være kompleks og tidskrævende. Ved hjælp af React Hook Form-biblioteket kan du nemt tilføje højtydende formularer til din React-applikation.

React Hook Form er et bibliotek til at bygge formularer i React, der forenkler processen med at skabe komplekse og genbrugelige formularer. Hvis du ønsker at bygge en React-app, bør du lære at bygge formularer i React ved hjælp af React Hook Form-biblioteket.

Installation af React Hook Form

For at begynde at bruge React Hook Form, skal du installere den ved hjælp af npm eller garnpakkeadministratorer.

For at installere React Hook Form ved hjælp af npm skal du køre følgende kommando i din terminal:

npm installer react-hook-form

For at installere React Hook Form ved hjælp af garn skal du køre følgende kommando:

garn tilføj reagere-krog-form

Oprettelse af en formular ved hjælp af React Hook Form

For at oprette en formular ved hjælp af React Hook Form, skal du bruge

brug Form krog. Det brug Form hook giver dig adgang til metoder og egenskaber, som du vil bruge til opbygge og administrere dine formularer i din React-applikation.

Her er et eksempel, der viser, hvordan man bruger brug Form krog:

importere Reagere fra'reagere'
importere { brugsformular } fra'reager-krog-form';
fungereForm() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (data) =>konsol.log (data);
Vend tilbage (



'tekst' { ...Tilmeld("fornavn")} />
Indsend</button>
 </form>
 )
}
eksportStandard Form;

React Hook Form-biblioteket bruger Tilmeld metode til at registrere dine inputværdier til krogen. Det Tilmeld metode forbinder inputfelterne i en formular til React Hook Form-biblioteket, så biblioteket kan spore og validere inputfelterne.

I kodeblokken ovenfor registrerer du et input med navnet 'fornavn' handleSend metoden i React Hook Form-biblioteket håndterer indsendelsen af ​​formularen.

For at håndtere formularindsendelse skal du videregive tilbagekaldsfunktionen ved indsend til handleSend metode. Det ved indsend funktion vil modtage et objekt, der indeholder værdierne for alle formularinput.

Valider inputs med registermetode

Det Tilmeld metode giver dig mulighed for at opsætte valideringsregler for dine inputfelter. For at tilføje validering til dine inputfelter sender du et objekt med valideringsregler som det andet argument til Tilmeld metode.

Ligesom:

importere Reagere fra'reagere'
importere { brugsformular } fra'reager-krog-form';
fungereForm() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (data) =>konsol.log (data);
Vend tilbage (



'tekst' { ...Tilmeld("fornavn", { påkrævet: rigtigt})} />
'adgangskode' { ...Tilmeld("adgangskode", { påkrævet: rigtigt, maxLængde: 10})}/>
Indsend</button>
 </form>
 )
}
eksportStandard Form;

I dette eksempel tilføjer du en valideringsregel til "fornavn"-indtastningsfeltet og to valideringsregler til "adgangskoden". Det påkrævet regel angiver, at brugeren skal udfylde inputfelterne, og de kan ikke indsende formularen, hvis felterne er tomme.

Det maxlængde regel angiver inputværdiens maksimale antal alfabetiske bogstaver. Bortset fra påkrævet og maxlængde metoder, kan du tilføje andre valideringsregler, som f.eks min, max, minLængde, mønster, og validere.

min & maks

Det min regel angiver minimumsværdien for et inputfelt og max regel angiver dens maksimale værdi.

Du kan bruge min og max regler med tal-type input, som dette:

'nummer' { ...Tilmeld("alder", {min: 18, max: 35}) } />

Værdien af ​​inputfeltet ovenfor skal være mindst 18 og ikke mere end 35.

minLængde

Det minLængde reglen ligner maxLængde regel, men angiver minimumsantallet af alfabetiske bogstaver i stedet:

'tekst' { ...Tilmeld("navn", { minLængde: 10 })}/>

I dette eksempel angiver minLength-reglen, at inputværdien skal være mindst 10 tegn lang.

mønster & valider

Det mønster regel angiver et regulært udtryksmønster, som inputværdien skal matche. Det validere regel giver dig mulighed for at definere en brugerdefineret valideringsfunktion for at validere inputværdien. Funktionen bør enten returnere rigtigt eller en strengfejlmeddelelse.

For eksempel:

'tekst' { ...Tilmeld("fornavn", {mønster: **/^[A-Za-z]+$/**}) } />
'nummer' { ...Tilmeld("prøve", {**valider: (værdi) => værdi <= 12** }) } />

I dette eksempel bruger "fornavn"-inputtet mønster Herske. Det mønster kræver, at inputværdien kun indeholder alfabetiske tegn (store og små bogstaver).

"Test"-indgangen bruger validere regel for at definere en tilpasset valideringsfunktion, der kontrollerer, om dens værdi er mindre end eller lig med 12.

Håndtering af fejl i din formular

React Hook Form-biblioteket giver en indbygget mekanisme til håndtering af JavaScript-fejl i dine formularer. Det handleSend funktion, kaldet når brugeren indsender formularen, returnerer et løfte, der løses med formulardataene, hvis valideringen lykkes.

Men hvis der opstår valideringsfejl, afvises løftet med et fejlobjekt, der indeholder valideringsfejlene.

Her er et eksempel på, hvordan man håndterer fejl ved hjælp af handleSend fungere:

importere Reagere fra'reagere'
importere { brugsformular } fra'reager-krog-form';
fungereForm() {
konst { register, handleSubmit, formState: { fejl } } = useForm();
konst onSubmit = (data) =>konsol.log (data); 
Vend tilbage (



'tekst' { ...Tilmeld("fornavn", { påkrævet: rigtigt})} />
 {errors.firstname && <span>Indtast venligst dit fornavnspan>}
'nummer' { ...Tilmeld("alder", {min: 18, max: 35,}) } />
 {fejl.alder?.type 'max' && <span> Du er for gammel til denne sidespan>}
 {fejl.alder?.type 'min' && <span> Du er for ung til denne sidespan>}
Indsend</button>
 </form>
 )
}
eksportStandard Form;

I denne kodeblok er formState objekt får adgang til fejlene i hvert felt. Det fejl objektet gemmer valideringsfejlene for hvert inputfelt. Det fejl objekt gengiver betinget en fejlmeddelelse for hvert ugyldigt felt.

For fornavn indtastningsfelt, hvis påkrævet reglen ikke er opfyldt, vises en fejlmeddelelse - "Indtast dit fornavn" - ved siden af ​​indtastningsfeltet. Hvis værdien af alder inputfeltet er uden for det tilladte område, vises en fejlmeddelelse.

Hvis værdien er mindre end 18, vil fejlmeddelelsen være "Du er for ung til dette websted", og hvis værdien er større end 35, vil fejlmeddelelsen være "Du er for gammel til dette websted".

Nu kan du bygge pålidelige formularer i React

Opbygning af formularer i React kan være en kompleks og tidskrævende proces. Alligevel forenkler React Hook Form denne opgave ved at levere et brugervenligt og fleksibelt bibliotek til styring af formulardata og validering.

Ved hjælp af useForm hook, register-metoden og handleSubmit-metoden bliver opbygning af formularer i React en mere effektiv og strømlinet proces. Du kan oprette funktionelle formularer, der til gengæld forbedrer brugeroplevelsen og den overordnede kvalitet af dine React-applikationer.