Kako uporabljati Formik za ustvarjanje obrazcev v Reactu

Formik olajša ustvarjanje obrazcev v Reactu. Tukaj je opisano , kako uporabiti Formik za ustvarjanje obrazcev v Reactu .

Formik in obrazci v Reactu

Formik je knjižnica za upravljanje obrazcev, ki ponuja komponente in kljuke, ki poenostavijo postopek ustvarjanja obrazcev React. V tem članku se s Download.vn naučimo , kako ustvariti registracijski obrazec v Reactu z uporabo Formik !

Kako uporabljati Formik za ustvarjanje obrazcev v Reactu

• Ustvarite aplikacijo React
• Ustvarite obrazec v Reactu
• Dodajte Formik v React
• Omogoči preverjanje pristnosti obrazcev
• Dodaj obravnavo napak
• Potrdite podatke z uporabo Yup

Ustvarite aplikacijo React

Uporabite create-react-app za ustvarjanje novega projekta React:

npx create-react-app formik-form

Zdaj se pomaknite do mape formik-form/src in izbrišite vse datoteke razen App.js. Nato ustvarite novo datoteko in jo poimenujte Register.js . Tukaj boste dodali obrazec. Ne pozabite ga uvoziti v App.js.

Ustvarite obrazec v Reactu

V Reactu lahko ustvarite obrazce z nadzorovanimi komponentami ali ne.

• Podatke obrazca, ustvarjene iz nadzorne komponente, bo obravnaval React.
• Podatke obrazca, ustvarjene iz nenadzorovanih elementov, obravnava DOM.

React vas spodbuja k uporabi nadzorovanih komponent. Omogočajo vam lokalno sledenje podatkov obrazca, tako da imate popoln nadzor nad obrazcem.

Spodaj je primer obrazca, ustvarjenega z nadzorovano komponento:

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;

V zgornji kodi inicializirate stanje in ustvarjate funkcijo obravnave za vsako vnosno polje. Čeprav deluje, lahko vaša koda postane ponavljajoča in neurejena, zlasti če je veliko vnosnih polj. Dodajanje preverjanja in obravnavanja sporočil o napakah je še en izziv.

Formik lahko zmanjša zgoraj navedeno stanje. Poenostavi obdelavo stanja, preverjanje veljavnosti in vnos podatkov.

Dodajte Formik v React

Preden uporabite formik , ga dodajte svojemu projektu z uporabo npm.

npm install formik

Za integracijo Formika boste uporabili kavelj useFormik. V Register.js vnesite useFormik na vrhu datoteke:

import { useFormik } from "formik"

Prvi korak je nastavitev vrednosti obrazca. V tem primeru boste inicializirali svoj e-poštni naslov in geslo.

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

Dodati morate tudi funkcijo onSubmit, ki pridobi vrednosti in obravnava oddajo obrazca. Za obrazec za registracijo to dejanje ustvari novega uporabnika v bazi podatkov.

Naslednji korak je uporaba predmeta formik za pridobivanje vrednosti obrazca v in iz stanja.

V zgornji kodi ste:

• Zagotovite vnosna polja z vrednostmi id in imena , ki so enakovredne vrednostim, uporabljenim med inicializacijo, s pomočjo kljuke useFormik .
• Dostopajte do vrednosti polja z uporabo njegovega imena, da ga izvlečete iz formik.values ​​​​.
• Povežite formik.handleChange z dogodkom onChange , da prikažete vhodne vrednosti kot uporabniške tipe.
• Za spremljanje obiskanih polj uporabite formik.handleBlur .
• Povežite formik.handleSubmit z dogodkom onSubmit , da sprožite funkcijo onSubmit, ki ste jo dodali kavlju useFormik .

Omogoči preverjanje pristnosti obrazcev

Pri ustvarjanju obrazca je preverjanje vnosa pomembno, saj zagotavlja preprosto preverjanje pristnosti uporabnika in shranjevanje podatkov v pravilni obliki. Na primer, lahko preverite veljavnost e-pošte, ima geslo vse potrebne znake ...

Če želite potrditi obrazec v tem primeru, izberite ustrezno funkcijo, sprejmite vrednosti obrazca in vrnite objekt napake.

Če dodate funkcijo preverjanja v useFormik , bodo vse najdene napake pri preverjanju v Formik.errors , indeksirane v imenu vnosnega polja. Ogledate si lahko na primer napake o e-poštnih poljih z uporabo Formik.errors.email .

V Register.js ustvarite validacijsko funkcijo in jo vključite v 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
 },
});

Dodaj obravnavo napak

Nato prikažite sporočila o napakah, če obstajajo. Uporabite Formik.touched, da preverite, ali je bilo to polje obiskano ali ne. S tem se izognete prikazu napake v polju, kjer uporabnik še ni dostopal.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Potrdite podatke z uporabo Yup

Formik ponuja lažji način za preverjanje obrazcev s knjižnico Yup. Za začetek namestite Yup:

npm install yup

Vnesite ja v Register.js .

import * as Yup from "yup"

Namesto pisanja lastne funkcije za preverjanje pristnosti bo uporaba Yupa za preverjanje veljavnosti e-pošte in gesel hitrejš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
 },
});

Opravljeno je! Ustvarili ste preprost registracijski obrazec z uporabo Formik in Yup .

Zgoraj je najpreprostejši način uporabe Formika za ustvarjanje obrazcev v Reactu . Upam, da vam bo ta članek koristen!