Hvernig á að nota Formik til að búa til eyðublöð í React

Formik gerir það auðveldara að búa til eyðublöð í React. Hér er hvernig á að nota Formik til að búa til eyðublöð í React .

Formik & form í React

Formik er eyðublaðastjórnunarsafn sem veitir íhluti og króka sem gera ferlið við að búa til React eyðublöð einfaldara. Í þessari grein skulum við læra með Download.vn hvernig á að búa til skráningareyðublað í React með Formik !

Hvernig á að nota Formik til að búa til eyðublöð í React

• Búðu til React app
• Búðu til eyðublað í React
• Bættu Formik við React
• Virkja auðkenningu eyðublaða
• Bæta við villumeðferð
• Staðfestu gögn með því að nota Yup

Búðu til React app

Notaðu create-react-app til að búa til nýtt React verkefni:

npx create-react-app formik-form

Farðu nú í formik-form/src möppuna og eyddu öllum skrám nema App.js . Næst skaltu búa til nýja skrá og nefna hana Register.js . Þetta er þar sem þú munt bæta við eyðublaðinu. Mundu að flytja það inn í App.js.

Búðu til eyðublað í React

Þú getur búið til eyðublöð í React með stýrðum íhlutum eða ekki.

• Eyðublaðsgögn sem myndast úr stjórnhlutanum verða meðhöndluð af React.
• Eyðublaðsgögn sem myndast úr óstýrðum þáttum eru meðhöndluð af DOM.

React hvetur þig til að nota stjórnaða íhluti. Þeir gera þér kleift að rekja eyðublaðsgögn á staðnum, svo þú hefur fulla stjórn á eyðublaðinu.

Hér að neðan er dæmi um eyðublað búið til með stýrðum íhlut:

import { useState } from "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [password, setpassword] = useState("");
 const handleSubmit = (event) => {
 event.preventDefault();
 console.log(email);
 };
 const handleEmail = (event) => {
 setemail(event.target.value);
 };
 const handlePassword = (event) => {
 setpassword(event.target.value);
 };
 return (
 

); }; export default Register;

Í kóðanum hér að ofan ertu að frumstilla ástand og búa til meðhöndlunaraðgerð fyrir hvern innsláttarreit. Á meðan það virkar getur kóðinn þinn orðið endurtekinn og sóðalegur, sérstaklega ef það eru margir innsláttarreitir. Að bæta við staðfestingu og meðhöndlun villuboða er önnur áskorun.

Formik getur dregið úr ofangreindu ástandi. Það gerir meðhöndlun, staðfestingu og innslátt gagna létt.

Bættu Formik við React

Áður en formik er notað skaltu bæta því við verkefnið þitt með því að nota npm.

npm install formik

Til að samþætta Formik muntu nota useFormik krókinn. Í Register.js, sláðu inn useFormik efst á skránni:

import { useFormik } from "formik"

Fyrsta skrefið er að setja upp formgildin. Í þessu tilviki muntu frumstilla tölvupóstinn þinn og lykilorð.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 onSubmit: values => {
// handle form submission
 },
});

Þú þarft líka að bæta við onSubmit aðgerð, sem fær gildin og sér um skil á eyðublöðum. Fyrir skráningareyðublað býr þessi aðgerð til nýjan notanda í gagnagrunninum.

Næsta skref er að nota formik hlutinn til að fá formgildin inn og út úr ástandi.

Í kóðanum hér að ofan ertu:

• Gefðu innsláttarreitir með auðkennis- og nafngildum sem jafngilda gildunum sem notuð voru við upphafssetningu með því að nota useFormik krókinn .
• Fáðu aðgang að gildi reits með því að nota nafn þess til að draga það úr formik.values .
• Binddu formik.handleChange við onChange viðburðinn til að birta inntaksgildi sem notendategundir.
• Notaðu formik.handleBlur til að fylgjast með heimsóttum reitum.
• Binddu formik.handleSubmit við onSubmit viðburðinn til að kveikja á onSubmit aðgerðinni sem þú bættir við useFormik krókinn .

Virkja auðkenningu eyðublaða

Þegar eyðublað er búið til er inntaksstaðfesting mikilvægt vegna þess að það tryggir að auðkenning notenda sé auðveld og gögnin eru vistuð á réttu sniði. Til dæmis geturðu athugað réttmæti tölvupóstsins, lykilorðið hefur alla nauðsynlega stafi...

Til að sannreyna eyðublaðið í þessu dæmi skaltu velja viðeigandi fall, samþykkja eyðublaðsgildin og skila villuhlut.

Ef þú bætir löggildingaraðgerð við useFormik , verða allar staðfestingarvillur sem finnast í Formik.errors , skráðar á heiti innsláttarreitsins. Til dæmis geturðu skoðað villur um tölvupóstsvið með því að nota Formik.errors.email .

Í Register.js skaltu búa til staðfestingaraðgerð og láta hana fylgja með useFormik .

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validate: () => {
 const errors = {};
 console.log(errors)
 if (!formik.values.email) {
 errors.email = "Required";
 } else if (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(formik.values.email)
 ) {
 errors.email = "Invalid email address";
 }
 if (!formik.values.password) {
 errors.password = "Required";
 } else if (formik.values.password.length < 8)="" {="" errors.password="Must be 8 characters or more" ;="" }="" return="" errors;="" },="" onsubmit:="" (values)=""> {
 console.log("submitted!");
 // handle submission
 },
});

Bæta við villumeðferð

Næst skaltu birta villuboð ef einhver er. Notaðu Formik.touched til að athuga hvort þessi reitur hafi verið heimsóttur eða ekki. Þetta kemur í veg fyrir að villa birtist á reitnum þar sem notandinn hefur ekki enn opnað.

{formik.touched.email && formik.errors.email ?

{formik.errors.email}

: null} {formik.touched.password && formik.errors.password ?

{formik.errors.password}

: null}

Staðfestu gögn með því að nota Yup

Formik veitir auðveldari leið til að staðfesta eyðublöð með Yup bókasafninu. Settu upp Yup til að byrja:

npm install yup

Sláðu inn yup í Register.js .

import * as Yup from "yup"

Í stað þess að skrifa þína eigin auðkenningaraðgerð verður hraðari að nota Yup til að athuga gildi tölvupósts og lykilorða.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Invalid email address")
 .required("Required"),
 password: Yup.string()
 .min(8, "Must be 8 characters or more")
 .required("Required")
 }),
 onSubmit: (values) => {
 console.log("submitted!");
// handle submission
 },
});

Það er gert! Þú hefur búið til einfalt skráningareyðublað með því að nota Formik og Yup .

Hér að ofan er einfaldasta leiðin til að nota Formik til að búa til eyðublöð í React . Vona að þessi grein nýtist þér!