Kako uporabljati Formik za ustvarjanje obrazcev v Reactu

Formik je knjižnica za upravljanje obrazcev, ki ponuja komponente in kljuke za olajšanje postopka ustvarjanja obrazcev React. Formik poskrbi za stanja obrazcev, preverjanje in obravnave napak namesto vas, kar olajša zbiranje in shranjevanje uporabniških podatkov.

V tej vadnici boste izvedeli, kako lahko ustvarite obrazec za registracijo v Reactu z uporabo Formika. Če želite slediti, vam mora biti udobno delati s kavlji React.

Ustvarite aplikacijo React

Uporabite aplikacijo create-react-app za ustvarite nov projekt React:

npx create-react-app formik-form

Zdaj se pomaknite do formik-form/src mapo in izbrišite vse datoteke razen App.js.

Nato ustvarite novo datoteko in jo poimenujte Register.js. Tukaj boste dodali svoj obrazec. Ne pozabite ga uvoziti App.js.

Ustvarite React obrazec

React obrazce lahko ustvarite z uporabo nadzorovanih ali nenadzorovanih komponent. Nadzorovana komponenta je tista, katere podatke obrazca obdeluje React sam. Nenadzorovana komponenta je tista, katere podatke obrazca obdeluje DOM.

Uradnik React dokumenti priporočamo uporabo nadzorovanih komponent. Omogočajo vam, da spremljate podatke obrazca v lokalnem stanju in tako imate popoln nadzor nad obrazcem.

Spodaj je primer obrazca, ustvarjenega z uporabo nadzorovane komponente.

import { useState } iz "react";
const Register = () => {
 const [e-pošta, setemail] = useState("");
 const [geslo, setpassword] = useState("");
 const handleSubmit = (dogodek) => {
 event.preventDefault();
 console.log (e-pošta);
 };
 const handleEmail = (dogodek) => {
 setemail (event.target.value);
 };
 const handlePassword = (dogodek) => {
 setpassword (event.target.value);
 };
 vrnitev (


 id="e-pošta"
 ime="e-pošta"
 type="e-pošta"
 placeholder="Vaš e-pošta"
 vrednost={e-pošta}
 onChange={handleEmail}
 />
 id="geslo"
 ime="geslo"
 type="geslo"
 placeholder="Vaše geslo"
 vrednost={geslo}
 onChange={handlePassword}
 />




 );
};
izvoz privzeti register;

V zgornji kodi ste inicializacija stanja in ustvarjanje funkcije za upravljanje za vsako vnosno polje. Čeprav to deluje, se lahko vaša koda zlahka ponavlja in natrpa, zlasti z mnogimi vnosnimi polji. Dodajanje preverjanja veljavnosti in obdelave sporočil o napakah je še en izziv.

Formik želi zmanjšati te težave. Omogoča enostavno upravljanje stanja obrazca, preverjanje in pošiljanje podatkov obrazca.

Dodajte Formik v React

Pred uporabo formik, ga dodajte svojemu projektu z uporabo npm.

npm namestite formik

Za integracijo Formika boste uporabili useFormik kavelj. V Register.js, uvozite useFormik na vrh datoteke:

uvozi { useFormik } iz "formik"

Prvi korak je inicializacija vrednosti obrazca. V tem primeru boste inicializirali e-pošto in geslo.

const formik = useFormik({
 začetne vrednosti: {
 E-naslov: "",
 geslo: "",
 },
 onSubmit: vrednosti => {
// obravnava oddajo obrazca
 },
});

Dodajate tudi funkcijo onSubmit, ki sprejema vrednosti obrazca in obravnava oddajo obrazca. Za obrazec za registracijo, kot je ta, bi to lahko pomenilo ustvarjanje novega uporabnika v bazi podatkov.

Naslednji korak je uporaba formik objekt, da se vrednosti obrazca vnesejo v stanje in iz njega.

 id="e-pošta"
 ime="e-pošta"
 type="e-pošta"
 placeholder="Vaš e-pošta"
 vrednost={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="geslo"
 ime="geslo"
 type="geslo"
 placeholder="Vaše geslo"
 vrednost={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

V zgornji kodi ste:

• Podajanje vnosnih polj an id in ime vrednost enaka tisti, uporabljeni med inicializacijo v useFormik kavelj.
• Dostop do vrednosti polja z uporabo njegovega imena za pridobivanje formik.values.
• Vezava formik.handleChange do dogodka onChange, da prikažete vhodne vrednosti kot tipe uporabnikov.
• Uporaba formik.handleBlur za spremljanje obiskanih polj.
• Vezava formik.handleSubmit na onSubmit dogodek, ki sproži onSubmit funkcijo, ki ste jo dodali v useFormik kavelj.

Omogoči potrditev obrazca

Pri ustvarjanju obrazca je pomembno, da preverite uporabniški vnos, kot ga naredi avtentikacija uporabnika enostavno, saj podatke shranjujete samo v pravilni obliki. V obrazcu lahko na primer preverite, ali je dani e-poštni naslov veljaven in ali ima geslo več kot 8 znakov.

Če želite obrazec preveriti, definirajte funkcijo preverjanja veljavnosti, ki sprejme vrednosti obrazca in vrne objekt napake.

Če dodate funkcijo preverjanja v useFormik, vse najdene napake pri preverjanju bodo na voljo v Formik.napake, indeksirano na vhodnem imenu. Do napake v polju e-pošte lahko na primer dostopate z uporabo Formik.errors.email.

V Register.js, ustvarite potrditi funkcijo in jo vključite useFormik.

const formik = useFormik({
 začetne vrednosti: {
 E-naslov: "",
 geslo: "",
 },
 potrdi: () => {
 const napake = {};
 console.log (napake)
 če (!formik.values.email) {
 errors.email = "Obvezno";
 } sicer če (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Neveljaven e-poštni naslov";
 }
 if (!formik.values.password) {
 errors.password = "Obvezno";
 } sicer če (formik.values.password.length < 8) {
 errors.password = "Vsebovati mora 8 znakov ali več";
 }
 vrnitev napak;
 },
 onSubmit: (vrednosti) => {
 console.log("oddano!");
 // obravnava oddajo
 },
});

Dodaj obravnavo napak

Nato prikažite sporočila o napakah, če obstajajo. Uporaba Formik.dotaknjen preverite, ali je bilo polje obiskano. To preprečuje prikaz napake za polje, ki ga uporabnik še ni obiskal.

 id="e-pošta"
 ime="e-pošta"
 type="e-pošta"
 placeholder="Vaš e-pošta"
 vrednost={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nič}
 id="geslo"
 ime="geslo"
 type="geslo"
 placeholder="Vaše geslo"
 vrednost={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: nič}

Potrdite podatke z uporabo Yup

Formik ponuja lažji način za potrditev obrazcev z uporabo Jap knjižnica. Za začetek namestite yup.

npm namestite yup

Uvozi ja v Register.js.

uvozi * kot Ja iz "ja"

Namesto da napišete lastno funkcijo preverjanja po meri, uporabite Yup, da preverite, ali sta e-pošta in geslo veljavna.

const formik = useFormik({
 začetne vrednosti: {
 E-naslov: "",
 geslo: "",
 },
 validationSchema: Yup.object().shape({
 e-pošta: yup.string()
 .email("Neveljaven e-poštni naslov")
 .required("Obvezno"),
 geslo: da.string()
 .min (8, "Mora biti 8 znakov ali več")
 .required("Obvezno")
 }),
 onSubmit: (vrednosti) => {
 console.log("oddano!");
// obravnava oddajo
 },
});

In to je to! Ustvarili ste preprost obrazec za registracijo z uporabo Formik in Yup.

Zavijanje vsega

Obrazci so sestavni del vsake aplikacije, saj vam omogočajo zbiranje podatkov o uporabnikih. V Reactu je lahko ustvarjanje obrazcev boleča izkušnja, še posebej, če imate opravka z veliko podatki ali več obrazci. Orodje, kot je Formik, omogoča enostaven in nemoten način pridobivanja in preverjanja vrednosti obrazcev.

10 najboljših praks React, ki jih morate upoštevati leta 2022

Preberite Naprej

O avtorju