Kuidas kasutada Formikut Reactis vormide loomiseks

Formik on vormihalduse teek, mis pakub komponente ja konkse Reacti vormide loomise protsessi hõlbustamiseks. Formik hoolitseb teie eest vormiolekute, valideerimise ja veakäsitlejate eest, mis teeb kasutajaandmete kogumise ja salvestamise lihtsaks.

Sellest õpetusest saate teada, kuidas saate Formiku abil Reactis registreerimisvormi luua. Järgimiseks peaksite olema mugav Reacti konksudega töötada.

Looge rakendus React

Kasutage rakendust loo-reageeri luua uus Reacti projekt:

npx loo-reageeri-rakendus formik-vorm

Nüüd navigeerige lehele formik-form/src kausta ja kustutage kõik failid, v.a App.js.

Järgmisena looge uus fail ja nimetage see Register.js. Siin saate oma vormi lisada. Ärge unustage seda importida App.js.

Looge reageerimisvorm

Saate luua Reacti vorme, kasutades kas kontrollitud komponente või kontrollimata komponente. Kontrollitav komponent on see, mille vormiandmeid töötleb React ise. Kontrollimatu komponent on see, mille vormiandmeid töötleb DOM.

Ametlik Reageeri dokumendid soovitame kasutada kontrollitud komponente. Need võimaldavad teil jälgida vormiandmeid kohalikus osariigis ja seega on teil vormi üle täielik kontroll.

Allpool on näide kontrollitud komponendi abil loodud vormist.

import { useState } kohast "react";
const Registreeri = () => {
 const [e-post, setemail] = useState("");
 const [parool, määrake parool] = useState("");
 const handleSubmit = (sündmus) => {
 event.preventDefault();
 console.log (e-post);
 };
 const handleEmail = (sündmus) => {
 setemail (event.target.value);
 };
 const handlePassword = (sündmus) => {
 määra parool (sündmus.sihtväärtus);
 };
 tagasi (


 id="e-post"
 name="email"
 type="email"
 placeholder="Teie e-post"
 väärtus={email}
 onChange={handleEmail}
 />
 id="parool"
 name="parool"
 type="parool"
 placeholder="Sinu parool"
 väärtus={parool}
 onChange={handlePassword}
 />




 );
};
ekspordi vaikimisi register;

Ülaltoodud koodis olete oleku initsialiseerimine ja töötleja funktsiooni loomine iga sisendvälja jaoks. Kuigi see töötab, võib teie kood kergesti korduda ja muutuda segaseks, eriti paljude sisestusväljade korral. Teine väljakutse on valideerimise ja veateadete käsitlemise lisamine.

Formik eesmärk on neid probleeme vähendada. See muudab vormi oleku käsitlemise, vormiandmete kinnitamise ja esitamise lihtsaks.

Reageerimiseks lisage Formik

Enne kasutamist formik, lisage see oma projekti kasutades npm.

npm install formik

Formiku integreerimiseks kasutate kasutaFormik konks. sisse Register.js, importige faili ülaosas UseFormik:

import { useFormik } "formikust"

Esimene samm on vormi väärtuste lähtestamine. Sel juhul lähtestate meiliaadressi ja parooli.

const formik = useFormik({
 esialgsed väärtused: {
 email: "",
 parool: "",
 },
 onSubmit: väärtused => {
// käsitle vormi esitamist
 },
});

Lisate ka funktsiooni onSubmit, mis võtab vastu vormi väärtused ja haldab vormi esitamist. Sellise registreerimisvormi puhul võib see tähendada uue kasutaja loomist andmebaasis.

Järgmine samm on kasutada formik objekti vormiväärtuste olekusse ja olekusse saamiseks.

 id="e-post"
 name="email"
 type="email"
 placeholder="Teie e-post"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="parool"
 name="parool"
 type="parool"
 placeholder="Sinu parool"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Ülaltoodud koodis olete:

• Sisestusväljadele an id ja nimi väärtus, mis on võrdne lähtestamisel kasutatud väärtusega kasutaFormik konks.
• Juurdepääs välja väärtusele, selle nime kasutamine selle toomiseks formik.väärtused.
• Köitmine formik.handleChange sündmusele onChange, et kuvada kasutaja sisestatud väärtused.
• Kasutades formik.handleBlur külastatud põldude jälgimiseks.
• Köitmine formik.handleEsita juurde on Submit sündmus käivitada on Submit funktsioonile lisasite kasutaFormik konks.

Vormi kinnitamise lubamine

Vormi loomisel on oluline kontrollida kasutaja sisendit selle tegemise ajal kasutaja autentimine lihtne, kuna salvestate andmeid ainult õiges vormingus. Näiteks saate oma vormis kontrollida, kas antud e-kiri on kehtiv ja kas parool on pikem kui 8 tähemärki.

Vormi kinnitamiseks määrake valideerimisfunktsioon, mis aktsepteerib vormi väärtused ja tagastab veaobjekti.

Kui lisate valideerimisfunktsiooni kasutaFormik, on kõik leitud valideerimisvead saadaval Formik.vead, indekseeritud sisendi nimele. Näiteks saate meilivälja veateate juurde pääseda kasutades Formik.errors.email.

sisse Register.js, looge kinnitada funktsiooni ja lisage see kasutaFormik.

const formik = useFormik({
 esialgsed väärtused: {
 email: "",
 parool: "",
 },
 kinnita: () => {
 const vead = {};
 console.log (vead)
 if (!formik.values.email) {
 errors.email = "Nõutav";
 } muidu kui (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Vigane e-posti aadress";
 }
 if (!formik.values.password) {
 errors.password = "Nõutav";
 } else if (formik.values.password.length < 8) {
 errors.password = "Peab olema 8 tähemärki või rohkem";
 }
 tagastamise vead;
 },
 onSubmit: (väärtused) => {
 console.log("esitatud!");
 // esitamise käsitlemine
 },
});

Lisa veakäsitlus

Järgmisena kuvage veateated, kui need on olemas. Kasuta Formik.puudutas kontrollida, kas põldu on külastatud. See hoiab ära vea kuvamise väljal, mida kasutaja pole veel külastanud.

 id="e-post"
 name="email"
 type="email"
 placeholder="Teie e-post"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: null}
 id="parool"
 name="parool"
 type="parool"
 placeholder="Sinu parool"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: null}

Andmete kinnitamine Yup abil

Formik pakub lihtsamat viisi vormide kinnitamiseks, kasutades Jep raamatukogu. Alustamiseks installige yup.

npm install yup

Import Jep sisse Register.js.

import * kui Yup alates "yup"

Selle asemel, et kirjutada oma kohandatud valideerimisfunktsiooni, kasutage e-posti aadressi ja parooli kehtivust kontrollimiseks Yup.

const formik = useFormik({
 esialgsed väärtused: {
 email: "",
 parool: "",
 },
 valideerimisskeem: Yup.object().shape({
 email: Yup.string()
 .email("Vigane e-posti aadress")
 .required("Nõutav"),
 parool: Yup.string()
 .min (8, "Peab olema 8 tähemärki või rohkem")
 .required("Nõutav")
 }),
 onSubmit: (väärtused) => {
 console.log("esitatud!");
// esitamise käsitlemine
 },
});

Ja see ongi kõik! Olete Formiki ja Yupi abil loonud lihtsa registreerimisvormi.

Pakkides kõike

Vormid on iga rakenduse lahutamatu osa, kuna need võimaldavad teil koguda kasutajateavet. Reactis võib vormide loomine olla valus kogemus, eriti kui tegemist on suure hulga andmete või mitme vormiga. Selline tööriist nagu Formik pakub lihtsat ja sujuvat viisi vormiväärtuste hankimiseks ja kinnitamiseks.

10 Reaktsiooni parimat tava, mida peate 2022. aastal järgima

Loe edasi

Autori kohta