Å lage skjemaer i React er en kompleks oppgave. Det innebærer å håndtere alle inndatatilstandene og endringene deres og validere det når skjemaet sendes inn.
For enkle skjemaer er ting generelt håndterbare. Men ettersom skjemaet ditt blir mer komplekst og du må legge til ulike valideringer, blir det en komplisert oppgave.
Så i stedet for manuelt å skrive all koden og håndtere komplekse skjemaer med valideringslogikk, kan vi bruke det mest populære React-biblioteket til dette, reagere-krok-form.
Det er det mest populære React-biblioteket for å lage skjemaer sammenlignet med formik, reagere endelig form, og andre, og jeg bruker den til alle mine klientprosjekter.
I denne artikkelen vil vi utforske hvordan du bruker reagere-krok-form bibliotek i detalj.
Så la oss komme i gang.
Hvorfor react-hook-form Library er det mest populære skjemabiblioteket i React
Følgende er noen av årsakene react-hook-form
er et populært valg for å lage React-skjemaer.
- Antall gjengivelser i applikasjonen er mindre sammenlignet med alternativene fordi den bruker refs i stedet for tilstand.
- Mengden kode du må skrive er mindre sammenlignet med
formik
,react-final-form
og andre alternativer. react-hook-form
integreres godt medyup
bibliotek for skjemavalidering slik at du kan kombinere dine egne valideringsskjemaer.- Monteringstiden er kortere sammenlignet med andre alternativer.
Sjekk ut reagere-krok-form nettsted for mer detaljert sammenligning.
Hvordan lage et skjema uten å bruke et bibliotek
Før du oppretter et skjema ved å bruke react-hook-form
bibliotek, la oss lage et enkelt skjema uten å bruke noe bibliotek.
Ta en titt på koden nedenfor:
import React, { useState } from "react";
import "./styles.css"; export default function App() { const [state, setState] = useState({ email: "", password: "" }); const handleInputChange = (event) => { const { name, value } = event.target; setState((prevProps) => ({ ...prevProps, [name]: value })); }; const handleSubmit = (event) => { event.preventDefault(); console.log(state); }; return ( <div className="App"> <form onSubmit={handleSubmit}> <div className="form-control"> <label>Email</label> <input type="text" name="email" value={state.email} onChange={handleInputChange} /> </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" value={state.password} onChange={handleInputChange} /> </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
Her er en Code Sandbox-demo.
I koden ovenfor har vi kun to inndatafelt, nemlig email
og password
og en send-knapp.
Hvert inndatafelt har en value
og onChange
handler lagt til slik at vi kan oppdatere tilstanden basert på brukerens input.
Dessuten har vi lagt til en handleSubmit
metode som viser dataene angitt i skjemaet til konsollen.
Dette ser bra ut. Men hva om vi trenger å legge til valideringer som obligatorisk feltvalidering, minimumslengdevalidering, passordvalidering, e-postfeltvalidering og også vise de tilsvarende feilmeldingene?
Koden vil bli mer kompleks og langvarig ettersom antall inndatafelter og deres valideringer øker.
Hvordan installere react-hook-form
Å vise skjemaer er et veldig vanlig krav i enhver applikasjon.
Så la oss lære hvorfor og hvordan du bruker react-hook-form. For det vil vi opprette en ny React-applikasjon.
Opprett et nytt React-prosjekt ved å kjøre følgende kommando fra terminalen:
create-react-app demo-react-hook-form
Når prosjektet er opprettet, sletter du alle filene fra src
mappe og opprette ny index.js
og styles.css
filer inne i src
mappe.
For å installere react-hook-form
biblioteket, utfør følgende kommando fra terminalen:
npm install react-hook-form@7.38.0 OR yarn add react-hook-form@7.38.0
Her installerer vi versjon 7.38.0
av react-hook-form
biblioteket som er den nyeste versjonen på tidspunktet for skriving av denne artikkelen.
Hvordan lage startsider
Åpne src/index.js
fil og legg til følgende innhold i den:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Merk at koden ovenfor bruker React versjon 18+ syntaks for å gjengi appen.
Hvis du bruker React-versjon mindre enn 18 (som du kan bekrefte fra package.json
fil), legg deretter til følgende kode i din src/index.js
filen.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
Nå, åpne src/styles.css
fil og legg til innholdet fra her. inni det.
Opprett nå en ny fil kalt App.js
Inne i src
mappe med følgende innhold:
import React from "react";
import "./styles.css"; export default function App() { return ( <div className="App"> <form> <div className="form-control"> <label>Email</label> <input type="text" name="email" /> </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" /> </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
Her har vi nettopp lagt til e-post- og passordfeltene i skjemaet.
Hvordan lage et grunnleggende skjema med react-hook-form
De react-hook-form
biblioteket tilbyr en useForm
krok som vi kan bruke til å jobbe med skjemaer.
Importer useForm
krok slik:
import { useForm } from 'react-hook-form';
Du kan også bruke det useForm
krok slik:
const { register, handleSubmit, formState: { errors },
} = useForm();
Her
register
er en funksjon levert avuseForm
krok. Vi kan tilordne det til hvert inndatafelt slik atreact-hook-form
kan spore endringene for inngangsfeltverdienhandleSubmit
er funksjonen vi kan ringe når skjemaet sendes innerrors
er en nestet egenskap iformState
objekt som vil inneholde valideringsfeilene, hvis noen
Bytt nå ut innholdet i App.js
fil med følgende kode:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Email</label> <input type="text" name="email" {...register("email")} /> </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" {...register("password")} /> </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
I koden ovenfor har vi lagt til en registerfunksjon til hvert inndatafelt som vi fikk fra useForm
hekte ved å gi et unikt navn til hver register
fungerer slik:
{...register("email")}
Vi bruker spredningsoperatøren så react-hook-form
vil spre ut alle nødvendige hendelsesbehandlere som onChange
, onBlur
, og andre rekvisitter for det inndatafeltet.
Hvis du legger til en console.log({ ...register("email") });
inne i komponenten, vil du se hva den returnerer som kan sees nedenfor:
Vi har også lagt til onSubmit
funksjon som sendes til handleSubmit
metode som denne:
<form onSubmit={handleSubmit(onSubmit)}>
...
Merk at du må gi et unikt navn til register
funksjon lagt til for hvert inndatafelt så react-hook-form
kan spore endrede data.
Når vi sender inn skjemaet, handleSubmit
funksjonen vil håndtere skjemainnsendingen. Den vil sende brukerens inntastede data til onSubmit
funksjon der vi logger brukerdataene til konsollen.
const onSubmit = (data) => { console.log(data);
};
Start nå programmet ved å kjøre npm start
or yarn start
kommando og du vil se følgende skjermbilde:
Her er en Code Sandbox-demo.
Som du kan se, når vi sender inn skjemaet, vises detaljene som er angitt av brukeren i konsollen.
Også sammenlignet med koden uten react-hook-form
(som vi så i begynnelsen av denne artikkelen i denne Code Sandbox-demo), er denne koden mye enklere.
Dette er fordi vi ikke trenger å legge til value
og onChange
behandler for hvert inndatafelt og det er ikke nødvendig å administrere applikasjonstilstanden selv.
Hvordan legge til valideringer i skjemaet
La oss nå legge til det obligatoriske feltet og valideringen av minimumslengde til inndatafeltene.
For å legge til validering kan vi sende et objekt til register
fungere som en andre parameter slik:
<input type="text" name="email" {...register("email", { required: true })}
/> <input type="password" name="password" {...register("password", { required: true, minLength: 6 })}
/>
Her, for e-postfeltet, spesifiserer vi obligatorisk feltvalidering. For passordfeltet angir vi det obligatoriske feltet og validering på minimum 6 tegn.
Når valideringen mislykkes, vil errors
gjenstand som kommer fra useForm
hook vil fylles ut med feltene som valideringen mislyktes for.
Så det skal vi bruke errors
objekt for å vise egendefinerte feilmeldinger.
Åpne App.js
fil og erstatt innholdet med følgende innhold:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Email</label> <input type="text" name="email" {...register("email", { required: true, pattern: /^[^@]+@[^@]+.[^@ .]{2,}$/ })} /> {errors.email && errors.email.type === "required" && ( <p className="errorMsg">Email is required.</p> )} {errors.email && errors.email.type === "pattern" && ( <p className="errorMsg">Email is not valid.</p> )} </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" {...register("password", { required: true, minLength: 6 })} /> {errors.password && errors.password.type === "required" && ( <p className="errorMsg">Password is required.</p> )} {errors.password && errors.password.type === "minLength" && ( <p className="errorMsg"> Password should be at-least 6 characters. </p> )} </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
Hvis du sjekker applikasjonen nå, vil du se følgende skjermbilde:
Her er en Code Sandbox-demo.
Som du kan se, får vi umiddelbare valideringsfeil for hvert inndatafelt når vi sender inn skjemaet og deretter prøver å skrive inn verdiene i inndatafeltene.
Hvis det er noen feil for noen av inndatafeltene, errors
objektet vil fylles ut med typen feil som vi bruker for å vise vår egen tilpassede feilmelding slik:
{errors.email && errors.email.type === "required" && ( <p className="errorMsg">Email is required.</p>
)}
{errors.email && errors.email.type === "pattern" && ( <p className="errorMsg">Email is not valid.</p>
)}
Her, basert på typen feil, viser vi forskjellige feilmeldinger.
Bruke ES11 valgfri kjettingoperatør, kan du ytterligere forenkle koden ovenfor slik:
{errors.email?.type === "required" && ( <p className="errorMsg">Email is required.</p>
)}
{errors.email?.type === "pattern" && ( <p className="errorMsg">Email is not valid.</p>
)}
På lignende måte har vi lagt til validering av passordfeltet.
Som du kan se, fokuseres hvert inndatafelt automatisk når vi sender inn skjemaet hvis det er noen valideringsfeil for det inndatafeltet.
Skjemaet sendes heller ikke inn så lenge det er en valideringsfeil. Hvis du sjekker nettleserkonsollen, vil du se at console.log
erklæringen skrives kun ut hvis skjemaet er gyldig og det ikke er noen feil.
Så bruker react-hook-form
reduserte mengden kode vi måtte skrive. Valideringen er også responsiv, så når feltet blir gyldig, forsvinner feilmeldingen umiddelbart.
Men etter hvert som antallet valideringer for hvert felt øker, vil de betingede kontrollene og feilmeldingskoden fortsatt øke. Så vi kan refaktorisere koden ytterligere for å gjøre den enda enklere.
Ta en titt på koden nedenfor:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Email</label> <input type="text" name="email" {...register("email", { required: "Email is required.", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Email is not valid." } })} /> {errors.email && <p className="errorMsg">{errors.email.message}</p>} </div> <div className="form-control"> <label>Password</label> <input type="password" name="password" {...register("password", { required: "Password is required.", minLength: { value: 6, message: "Password should be at-least 6 characters." } })} /> {errors.password && ( <p className="errorMsg">{errors.password.message}</p> )} </div> <div className="form-control"> <label></label> <button type="submit">Login</button> </div> </form> </div> );
}
I koden ovenfor har vi endret valideringskoden for e-post og passord.
For inndatafeltet for e-post endret vi denne forrige koden:
{...register("email", { required: true, pattern: /^[^@]+@[^@]+.[^@ .]{2,}$/ })}
til koden nedenfor:
{...register("email", { required: "Email is required.", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Email is not valid." }
})}
Her har vi direkte gitt feilmeldingen vi ønsker å vise mens vi legger til selve valideringen.
Så vi trenger ikke lenger å legge til ekstra kontroller for hver validering. Vi viser feilmeldingen ved å bruke message
eiendom tilgjengelig inne i errors
objekt for hvert inndatafelt slik:
{errors.email && <p className="errorMsg">{errors.email.message}</p>}
Så ved å gjøre det på denne måten forenkles koden ytterligere som gjør det enkelt å legge til ekstra valideringer i fremtiden.
Merk at hvis det er valideringsfeil, vil ikke onSubmit-behandleren bli utført og det tilsvarende inndatafeltet vil automatisk bli fokusert (noe som er bra).
Her er en oppdatert Code Sandbox-demo.
Hvordan legge til flere valideringer
Du kan til og med gi flere valideringer for inndatafeltet ved å legge til en validate
gjenstand. Dette er nyttig hvis du trenger å utføre komplekse valideringer som dette:
<input type="password" name="password" {...register("password", { required: true, validate: { checkLength: (value) => value.length >= 6, matchPattern: (value) => /(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?!.*s)(?=.*[!@#$*])/.test( value ) } })}
/>
og for å vise feilmeldingene bruker vi det slik:
{errors.password?.type === "required" && ( <p className="errorMsg">Password is required.</p>
)}
{errors.password?.type === "checkLength" && ( <p className="errorMsg"> Password should be at-least 6 characters. </p>
)}
{errors.password?.type === "matchPattern" && ( <p className="errorMsg"> Password should contain at least one uppercase letter, lowercase
letter, digit, and special symbol. </p>
)}
Her er en Code Sandbox-demo.
Slik tilbakestiller du skjemaverdiene
Noen ganger må vi tilbakestille/tømme dataene som er lagt inn av brukeren etter en handling.
For eksempel, når skjemaet er sendt inn, ønsker vi å vise suksessmeldingen og deretter slette skjemadataene slik at brukeren ikke skal sende inn de samme dataene på nytt.
I et slikt tilfelle kan vi ringe reset
funksjonen returnert av useForm
koble til for å slette skjemadataene.
const { reset } = useForm();
Her er en Code Sandbox-demo.
De reset
funksjonen godtar også et valgfritt objekt der du kan sende verdiene du vil at skjemadataene skal tilbakestille:
reset({ username: "Alex", email: "alex@example.com", password: "Test@123"
});
Her skal nøkkelbrukernavnet, e-postadressen eller passordet samsvare med navnet som sendes til register
funksjon slik at det respektive inndatafeltet blir satt til den beståtte verdien.
Slik setter du innledende skjemaverdier ved å bruke standardverdier
De useForm hook godtar en liste over alternativer, hvorav ett er defaultValues
.
Ved hjelp av defaultValues
vi kan angi startverdier for skjemaelementene og tilbakestille dem når vi flytter fra en side til en annen slik:
const { user } = props;
const { register, handleSubmit, formState: { errors }
} = useForm({ defaultValues: { first_name: user.first_name, last_name: user.last_name }
}); // JSX <Form.Control type="text" {...register("first_name")}
/> <Form.Control type="text" {...register("last_name")}
/>
I koden ovenfor, for register
funksjonen vi har bestått first_name
som navnet. Dette betyr at i defaultValues
vi bruker samme navn for å angi startverdien.
Så for å stille inn inngangsverdien riktig, må du bruke samme navn som brukes i register
funksjon for å stille inn startverdien ved hjelp av defaultValues
.
Her er en Code Sandbox-demo.
Hvordan bruke react-hook-form med andre biblioteker
Noen ganger kan vi bruke noen eksterne biblioteker som reagere-velg for å tillate flere valg i en rullegardin.
I slike tilfeller kan vi ikke legge til direkte register
funksjon for å vise rullegardinmenyen for valg. Så hvis vi ønsker å legge til react-hook-form
valideringer uten å skrive vår egen kode og behandlerfunksjon, kan vi bruke Controller
komponent fra react-hook-form
som dette:
import React from "react";
import { useForm, Controller } from "react-hook-form";
import Select from "react-select";
import "./styles.css"; const departments = [ { value: "Computer-Science", label: "Computer Science" }, { value: "Physics", label: "Physics" }, { value: "Chemistry", label: "Chemistry" }, { value: "Mathematics", label: "Mathematics" }
]; export default function App() { const { control, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)}> <div className="form-control"> <label>Select Department of Interest</label> <Controller name="department" control={control} rules={{ required: true }} render={({ field }) => ( <Select {...field} isMulti options={departments} /> )} /> {errors.department && ( <p className="errorMsg">This is a required field.</p> )} </div> <div className="form-control"> <label></label> <button type="submit">Submit</button> </div> </form> </div> );
}
Her er en Code Sandbox-demo.
Som du kan se i koden ovenfor, importerer vi Controller
komponent øverst:
import { useForm, Controller } from "react-hook-form";
og control
fra useForm
krok slik:
const { control, handleSubmit, formState: { errors } } = useForm();
Merk, vi bruker ikke register
funksjon her.
Regelmessig bruk av reagere-velg bibliotek for å tillate flere valg går slik:
import Select from "react-select"; // use
<Select isMulti options={options} />
Men å bruke den med react-hook-form
vi må pakke det inn Controller
komponent:
<Controller name="department" control={control} rules={{ required: true }} render={({ field }) => ( <Select {...field} isMulti options={options} /> )} />
Her må vi gi en unik verdi for name
prop i Controller
.
Valideringene legges til som en del av rules
prop og vi bruker render
prop for å gjengi Select
nedtrekksmenyen.
Hvordan bruke andre inngangstyper med react-hook-form
I denne delen ser vi hvordan du bruker alternativknapper og avmerkingsbokser med react-hook-form
.
Ta en titt på koden nedenfor:
import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./styles.css"; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <div className="container"> <form onSubmit={handleSubmit(onSubmit)}> <Form.Group className="mb-3" controlId="email"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter your email" {...register("email", { required: "Please enter your email", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Please enter a valid email" } })} /> {errors.email && <p className="errorMsg">{errors.email.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="gender"> <Form.Label>Select Gender</Form.Label> <Form.Check type="radio" label="Male" value="male" {...register("gender", { required: "Please select your gender" })} /> <Form.Check type="radio" label="Female" value="female" {...register("gender")} /> {errors.gender && <p className="errorMsg">{errors.gender.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="skills"> <Form.Label>Select Your Skills</Form.Label> <Form.Check type="checkbox" label="JavaScript" value="JavaScript" {...register("skills", { required: "Please select at-least one skill" })} /> <Form.Check type="checkbox" label="React" value="react" {...register("skills")} /> <Form.Check type="checkbox" label="Node.js" value="nodejs" {...register("skills")} /> <Form.Check type="checkbox" label="Angular" value="angular" {...register("skills")} /> {errors.skills && <p className="errorMsg">{errors.skills.message}</p>} </Form.Group> <label></label> <Button type="submit" variant="primary"> Submit </Button> </form> </div> );
}
Her er en Code Sandbox-demo.
I koden ovenfor bruker jeg react-bootstrap for å få brukergrensesnittet til å se bra ut, så Form.Check
er en react-bootstrap
komponent.
Hovedpoenget du må huske er at vi ikke har gitt de samme navnene for register
funksjon for en gruppe radioknapper og avmerkingsbokser som dette:
<Form.Check type="radio" label="Male" value="male" {...register("gender", { required: "Please select your gender" })}
/>
<Form.Check type="radio" label="Female" value="female" {...register("gender")}
/>
I koden ovenfor har vi gitt gender
som navn for både radioknappene og skills
som navn for alle avmerkingsboksene som vist nedenfor:
<Form.Check type="checkbox" label="JavaScript" value="JavaScript" {...register("skills", { required: "Please select at-least one skill" })}
/>
<Form.Check type="checkbox" label="React" value="react" {...register("skills")}
/>
<Form.Check type="checkbox" label="Node.js" value="nodejs" {...register("skills")}
/>
<Form.Check type="checkbox" label="Angular" value="angular" {...register("skills")}
/>
Vær også oppmerksom på at den nødvendige feltvalideringen bare legges til for den første alternativknappen eller avmerkingsboksen. Fordi vi bruker samme navn, trenger vi ikke å legge til den samme valideringen til hver alternativknapp eller avmerkingsboks.
Hvordan angi startverdier for radioknapper og avmerkingsbokser
Noen ganger kan vi ha forhåndsvalgte alternativknapper eller avmerkingsbokser som vi må vise ved sideinnlasting, i et slikt tilfelle kan vi igjen bruke defaultValues
alternativ fra for useForm
krok.
Ta en titt på koden nedenfor:
import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import "./styles.css"; const initialValues = { gender: "male", skills: { JavaScript: true, react: false, nodejs: true, angular: false }
}; export default function App() { const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues: { gender: initialValues.gender, skills: Object.keys(initialValues.skills).filter( (item) => initialValues.skills[item] === true ) } }); const onSubmit = (data) => { console.log(data); }; return ( <div className="container"> <form onSubmit={handleSubmit(onSubmit)}> <Form.Group className="mb-3" controlId="email"> <Form.Label>Email</Form.Label> <Form.Control type="email" placeholder="Enter your email" {...register("email", { required: "Please enter your email", pattern: { value: /^[^@]+@[^@]+.[^@ .]{2,}$/, message: "Please enter a valid email" } })} /> {errors.email && <p className="errorMsg">{errors.email.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="gender"> <Form.Label>Select Gender</Form.Label> <Form.Check type="radio" label="Male" value="male" {...register("gender", { required: "Please select your gender" })} /> <Form.Check type="radio" label="Female" value="female" {...register("gender")} /> {errors.gender && <p className="errorMsg">{errors.gender.message}</p>} </Form.Group> <Form.Group className="mb-3" controlId="skills"> <Form.Label>Select Your Skills</Form.Label> <Form.Check type="checkbox" label="JavaScript" value="JavaScript" {...register("skills", { required: "Please select at-least one skill" })} /> <Form.Check type="checkbox" label="React" value="react" {...register("skills")} /> <Form.Check type="checkbox" label="Node.js" value="nodejs" {...register("skills")} /> <Form.Check type="checkbox" label="Angular" value="angular" {...register("skills")} /> {errors.skills && <p className="errorMsg">{errors.skills.message}</p>} </Form.Group> <label></label> <Button type="submit" variant="primary"> Submit </Button> </form> </div> );
}
Her er en Code Sandbox-demo.
I koden ovenfor har vi en initialValues
objekt som inneholder verdiene vi ønsker å angi ved første sideinnlasting:
const initialValues = { gender: "male", skills: { JavaScript: true, react: false, nodejs: true, angular: false }
};
Siden vi kan ha flere ferdigheter, skills
er et objekt som vist ovenfor. Så vi ønsker å vise alternativknappen valgt hvis verdien er male
og vi vil bare vise de avmerkingsboksene som er valgt som verdien er true
i skills
gjenstand.
Derfor, for defaultValues
alternativet, går vi over skills
objekt ved hjelp av filter
metode for å finne ut hvilke ferdigheter verdien er for true
som vist nedenfor:
const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues: { gender: initialValues.gender, skills: Object.keys(initialValues.skills).filter( (item) => initialValues.skills[item] === true ) } });
Som JavaScript
og nodejs
verdier er true
den skills
rekke etter filter
metode vil bli ["JavaScript", "nodejs"]
så defaultValues
objektet vil se slik ut:
useForm({ defaultValues: { gender: 'male', skills: ["JavaScript", "nodejs"] }
});
Derfor, når siden er lastet, er det bare male
kjønn og JavaScript
og Node.js
ferdigheter vil bli valgt/kontrollert som standard.
Merk at foringsrøret som brukes i skills
objektet må samsvare med value
spesifisert for avmerkingsboksen.
Så selv om etiketten for avkrysningsboksen er Node.js
, dens verdi er nodejs
så vi bruker nodejs
som nøkkelen i initialValues
gjenstand.
Nedenfor er demoen av hvordan det ser ut ved sideinnlasting.
Og det er det! Du har lært hvordan du bruker react-hook-form for enklere å bygge komplekse skjemaer i React.
Takk for at du leste!
Hvis du vil lære Redux i detalj fra bunnen av og bygge 3 apper sammen med komplett matbestillingsapp, sjekk ut min Mestring av Redux kurs.
På kurset vil du lære:
- Grunnleggende og avansert Redux
- Hvordan håndtere den komplekse tilstanden til array og objekter
- Hvordan bruke flere reduksjonsmidler for å administrere kompleks redux-tilstand
- Hvordan feilsøke en Redux-applikasjon
- Slik bruker du Redux i React ved å bruke react-redux-biblioteket for å gjøre appen din reaktiv.
- Hvordan bruke redux-thunk-biblioteket til å håndtere asynkrone API-anrop
- Bygg 3 forskjellige apper med Redux
og mye mer.
Til slutt skal vi bygge en komplett matbestillingsapp fra bunnen av med stripe-integrasjon for å godta betalinger og distribuere det til produksjon.
Vil du holde deg oppdatert med vanlig innhold angående JavaScript, React, Node.js? Følg meg på Linkedin.
- SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
- kilde: https://www.codementor.io/myogeshchavan97/how-to-create-forms-in-react-using-react-hook-form-229iss0ycb
- 18 +
- a
- ovenfor
- akseptere
- godtar
- Handling
- la til
- avansert
- Etter
- alex
- Alle
- alternativer
- beløp
- og
- Vinkel
- En annen
- api
- app
- Søknad
- apps
- Array
- Artikkel
- automatisk
- tilgjengelig
- basert
- grunnleggende
- fordi
- bli
- blir
- under
- nett~~POS=TRUNC leseren~~POS=HEADCOMP
- bygge
- knapp
- ring
- som heter
- saken
- saker
- Endringer
- endring
- karakter
- tegn
- sjekk
- Sjekker
- kjemi
- valg
- fjerne
- kunde
- kode
- COM
- kombinere
- kommer
- Felles
- sammenlignet
- sammenligning
- fullføre
- komplekse
- komplisert
- komponent
- datamaskin
- informatikk
- Bekrefte
- Konsoll
- Container
- inneholder
- innhold
- innhold
- kontroll
- controller
- riktig
- Tilsvarende
- kurs
- skape
- opprettet
- Opprette
- CSS
- skikk
- dato
- Dato
- Misligholde
- Demo
- Avdeling
- avdelinger
- utplassere
- detalj
- detaljert
- detaljer
- forskjellig
- Digit
- direkte
- Vise
- visning
- skjermer
- dokument
- gjør
- ikke
- hver enkelt
- lett
- elementer
- emalje
- Enter
- kom inn
- feil
- feil
- Eter (ETH)
- Selv
- Event
- eksempel
- henrette
- utforske
- eksportere
- utvendig
- ekstra
- Mislyktes
- mislykkes
- hunn
- felt
- Felt
- filet
- Filer
- slutt~~POS=TRUNC
- Finn
- slutt
- Først
- fokuserte
- etter
- mat
- skjema
- skjemaer
- fra
- funksjon
- videre
- framtid
- Kjønn
- generelt
- få
- få
- gif
- GitHub
- Gi
- gitt
- Går
- god
- Gruppe
- håndtere
- Håndtering
- her.
- Hvordan
- Hvordan
- HTTPS
- importere
- importere
- in
- Øke
- øker
- innledende
- inngang
- installere
- installere
- instant
- i stedet
- Integrerer
- integrering
- innebærer
- IT
- selv
- Javascript
- nøkkel
- Etiketten
- siste
- LÆRE
- lært
- Lengde
- brev
- bibliotekene
- Bibliotek
- Liste
- laste
- Lang
- lenger
- Se
- ser ut som
- UTSEENDE
- Hoved
- gjøre
- GJØR AT
- administrer
- manuelt
- Match
- matematikk
- midler
- melding
- meldinger
- metode
- kunne
- minimum
- mer
- mest
- Mest populær
- flytting
- Mozilla
- flere
- navn
- nemlig
- navn
- Trenger
- Ny
- node
- node.js
- Antall
- objekt
- ONE
- åpen
- operatør
- Alternativ
- alternativer
- Annen
- andre
- egen
- parameter
- del
- bestått
- Passerer
- Passord
- Mønster
- betalinger
- utføre
- Fysikk
- plato
- Platon Data Intelligence
- PlatonData
- vær så snill
- Point
- Populær
- befolket
- forrige
- primære
- Produksjon
- prosjekt
- prosjekter
- eiendom
- gi
- forutsatt
- gir
- radio
- RE
- Reager
- grunner
- Redusert
- Redux
- Refaktor
- om
- registrere
- regelmessig
- husker
- gjengivelse
- erstatte
- påkrevd
- behov
- de
- responsive
- retur
- avkastning
- root
- rennende
- samme
- sandkasse
- Vitenskap
- Skjerm
- Sekund
- Seksjon
- valgt
- utvalg
- sett
- innstilling
- bør
- Vis
- vist
- lignende
- Enkelt
- forenklet
- forenkle
- ferdighet
- ferdigheter
- mindre
- So
- noen
- spesiell
- spesifisert
- spre
- Begynn
- startet
- Tilstand
- Uttalelse
- Stater
- opphold
- Still
- stripe
- innsending
- send
- innsendt
- suksess
- slik
- symbol
- syntaks
- Target
- Oppgave
- terminal
- De
- Fremtiden
- Staten
- deres
- ting
- ting
- tid
- til
- topp
- spor
- sant
- typer
- ui
- unik
- Oppdater
- oppdatert
- bruke
- Bruker
- VALIDERE
- validering
- verdi
- Verdier
- ulike
- Ve
- versjon
- Nettsted
- Hva
- hvilken
- mens
- vil
- uten
- Arbeid
- vikle
- skrive
- skriving
- Din
- youtube
- zephyrnet