Kaip naudoti „Formik“ formoms kurti „React“.

„Formik“ yra formų valdymo biblioteka, kurioje pateikiami komponentai ir kabliukai, palengvinantys „React“ formų kūrimo procesą. Formik pasirūpina formų būsenomis, patvirtinimu ir klaidų tvarkytojais už jus, todėl lengva rinkti ir saugoti vartotojo duomenis.

Šioje pamokoje sužinosite, kaip galite sukurti registracijos formą React naudojant Formik. Jei norite sekti, jums turėtų būti patogu dirbti su „React“ kabliukais.

Sukurkite programą „React“.

Naudokite programą sukurti-reaguoti sukurti naują React projektą:

npx Create-React-app formik-form

Dabar eikite į formik-form/src aplanką ir ištrinkite visus failus, išskyrus App.js.

Tada sukurkite naują failą ir pavadinkite jį Register.js. Čia pridėsite savo formą. Nepamirškite jo importuoti App.js.

Sukurkite reakcijos formą

Galite kurti React formas naudodami valdomus arba nekontroliuojamus komponentus. Valdomas komponentas yra tas, kurio formos duomenis tvarko pati „React“. Nekontroliuojamas komponentas yra tas, kurio formos duomenis tvarko DOM.

Oficialus

Reaguoti dokumentus rekomenduojame naudoti kontroliuojamus komponentus. Jie leidžia sekti formos duomenis vietinėje valstybėje ir todėl visiškai valdyti formą.

Toliau pateikiamas formos, sukurtos naudojant valdomą komponentą, pavyzdys.

importuoti { useState } iš "react";
const Registruotis = () => {
 const [el. paštas, setemail] = useState("");
 const [slaptažodis, nustatyti slaptažodį] = useState("");
 const handleSubmit = (įvykis) => {
 event.preventDefault();
 console.log (el. paštas);
 };
 const handleEmail = (įvykis) => {
 setemail (event.target.value);
 };
 const handlePassword = (įvykis) => {
 nustatyti slaptažodį (event.target.value);
 };
 grįžti (


 id="el.paštas"
 name="el.paštas"
 type="el.paštas"
 placeholder="Jūsų el. paštas"
 value={email}
 onChange={handleEmail}
 />
 id="slaptažodis"
 vardas = slaptažodis
 type="slaptažodis"
 placeholder="Jūsų slaptažodis"
 value={password}
 onChange={handlePassword}
 />




 );
};
numatytasis eksporto registras;

Aukščiau pateiktame kode jūs esate inicijuojant valstybę ir sukurti kiekvieno įvesties lauko tvarkyklės funkciją. Nors tai veikia, jūsų kodas gali lengvai pasikartoti ir būti netvarkingas, ypač kai yra daug įvesties laukų. Kitas iššūkis yra patvirtinimo ir klaidų pranešimų tvarkymo pridėjimas.

Formik siekiama sumažinti šias problemas. Tai leidžia lengvai tvarkyti formos būseną, patvirtinti ir pateikti formos duomenis.

Pridėkite Formik prie React

Prieš naudojant formik, pridėkite jį prie savo projekto naudodami npm.

npm įdiegti formik

Norėdami integruoti Formik, naudosite Naudokite Formik kabliukas. Į Register.js, importuokite useFormik failo viršuje:

importuoti { useFormik } iš "formik"

Pirmas žingsnis yra formos reikšmių inicijavimas. Tokiu atveju inicijuosite el. pašto adresą ir slaptažodį.

const formik = useFormik({
 pradinės vertės: {
 paštas: "",
 Slaptažodis: "",
 },
 onSubmit: reikšmės => {
// tvarkyti formos pateikimą
 },
});

Taip pat pridedate funkciją onSubmit, kuri gauna formos reikšmes ir tvarko formos pateikimą. Tokios registracijos formos atveju tai gali reikšti, kad duomenų bazėje reikia sukurti naują vartotoją.

Kitas žingsnis yra naudoti formik objektą, kad gautų formos vertes į būseną ir iš jos.

 id="el.paštas"
 name="el.paštas"
 type="el.paštas"
 placeholder="Jūsų el. paštas"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="slaptažodis"
 vardas = slaptažodis
 type="slaptažodis"
 placeholder="Jūsų slaptažodis"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Aukščiau pateiktame kode jūs esate:

• Pateikiant įvesties laukus an id ir vardas reikšmė lygi tai, kuri buvo naudojama inicijuojant Naudokite Formik kabliukas.
• Prieiga prie lauko vertės, naudojant jo pavadinimą, kad jį gautumėte formik.vertybės.
• Įrišimas formik.handleChange į įvykį onChange, kad būtų rodomos įvesties reikšmės, kurias įveda vartotojas.
• Naudojant formik.handleBlur stebėti aplankytus laukus.
• Įrišimas formik.handleSubmit prie onSubmit įvykis, suaktyvinantis onSubmit funkcija, kurią pridėjote prie Naudokite Formik kabliukas.

Įgalinti formos patvirtinimą

Kuriant formą svarbu patvirtinti vartotojo įvestį, kaip ji daroma vartotojo autentifikavimas paprasta, nes saugote duomenis tik tinkamu formatu. Pavyzdžiui, formoje galite patikrinti, ar pateiktas el. laiškas yra galiojantis ir ar slaptažodis yra sudarytas iš daugiau nei 8 simbolių.

Norėdami patvirtinti formą, apibrėžkite tikrinimo funkciją, kuri priima formos reikšmes ir grąžina klaidos objektą.

Jei pridėsite patvirtinimo funkciją prie Naudokite Formik, bet kokia rasta patvirtinimo klaida bus pasiekiama Formik.klaidos, indeksuotas įvesties pavadinime. Pavyzdžiui, el. pašto lauko klaidą galite pasiekti naudodami Formik.errors.email.

Į Register.js, sukurkite patvirtinti funkciją ir įtraukite ją Naudokite Formik.

const formik = useFormik({
 pradinės vertės: {
 paštas: "",
 Slaptažodis: "",
 },
 patvirtinti: () => {
 const klaidos = {};
 console.log (klaidos)
 if (!formik.values.email) {
 errors.email = "Būtina";
 } dar jei (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Netinkamas el. pašto adresas";
 }
 if (!formik.values.password) {
 errors.password = "Būtina";
 } else if (formik.values.password.length < 8) {
 errors.password = "Turi būti 8 ar daugiau simbolių";
 }
 grąžinimo klaidos;
 },
 onSubmit: (reikšmės) => {
 console.log("pateikta!");
 // tvarkyti pateikimą
 },
});

Pridėti klaidų tvarkymą

Tada parodykite klaidų pranešimus, jei jie yra. Naudokite Formik.palietė patikrinti, ar laukas buvo aplankytas. Tai neleidžia rodyti klaidos lauke, kurio vartotojas dar neaplankė.

 id="el.paštas"
 name="el.paštas"
 type="el.paštas"
 placeholder="Jūsų el. paštas"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: null}
 id="slaptažodis"
 vardas = slaptažodis
 type="slaptažodis"
 placeholder="Jūsų slaptažodis"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: null}

Patvirtinkite duomenis naudodami „Yup“.

„Formik“ suteikia paprastesnį būdą patvirtinti formas naudojant taip biblioteka. Norėdami pradėti, įdiekite yup.

npm įdiegti yup

Importuoti taip in Register.js.

importuoti * kaip Yup iš "yup"

Užuot rašę savo pasirinktinę patvirtinimo funkciją, naudokite Yup, kad patikrintumėte, ar el. pašto adresas ir slaptažodis galioja.

const formik = useFormik({
 pradinės vertės: {
 paštas: "",
 Slaptažodis: "",
 },
 patvirtinimo schema: Yup.object().shape({
 paštas: Yup.string()
 .email("Neteisingas el. pašto adresas")
 .required("Būtina"),
 slaptažodis: Yup.string()
 .min (8, „Turi būti 8 ar daugiau simbolių“)
 .required("Būtina")
 }),
 onSubmit: (reikšmės) => {
 console.log("pateikta!");
// tvarkyti pateikimą
 },
});

Štai ir viskas! Sukūrėte paprastą registracijos formą naudodami Formik ir Yup.

Viską suvynioti

Formos yra neatskiriama bet kurios programos dalis, nes jos leidžia rinkti informaciją apie vartotoją. React formų kūrimas gali būti skausminga patirtis, ypač jei dirbate su daug duomenų arba keliomis formomis. Toks įrankis kaip „Formik“ suteikia lengvą ir sklandų formos verčių nuskaitymo ir patvirtinimo būdą.

10 Reagavimo geriausių praktikų, kurių reikia laikytis 2022 m

Skaitykite toliau

Apie autorių