Formikin käyttäminen lomakkeiden luomiseen Reactissa

Formik on lomakkeiden hallintakirjasto, joka tarjoaa komponentteja ja koukkuja, jotka helpottavat React-lomakkeiden luontiprosessia. Formik huolehtii lomaketiloista, validoinnista ja virhekäsittelijöistä puolestasi, mikä tekee käyttäjätietojen keräämisestä ja tallentamisesta helppoa.

Tässä opetusohjelmassa opit, kuinka voit luoda rekisteröintilomakkeen Reactissa Formikin avulla. Jotta voit seurata mukana, sinun pitäisi olla mukava työskennellä React-koukkujen kanssa.

Luo React-sovellus

Käytä luo-react-sovellusta luo uusi React-projekti:

npx create-react-app formik-form

Siirry nyt kohtaan formik-form/src kansio ja poista kaikki tiedostot paitsi App.js.

Luo seuraavaksi uusi tiedosto ja nimeä se Register.js. Tässä voit lisätä lomakkeesi. Muista tuoda se sisään App.js.

Luo reagointilomake

Voit luoda React-lomakkeita käyttämällä joko ohjattuja tai hallitsemattomia komponentteja. Ohjattu komponentti on sellainen, jonka lomaketietoja React käsittelee itse. Hallitsematon komponentti on sellainen, jonka lomaketietoja DOM käsittelee.

Virallinen Reagoi asiakirjoihin suosittelemme kontrolloitujen komponenttien käyttöä. Niiden avulla voit seurata lomaketietoja paikallisessa tilassa ja hallita siten lomaketta täysin.

Alla on esimerkki lomakkeesta, joka on luotu käyttämällä ohjattua komponenttia.

tuo { useState } "react"-kentästä;
const Rekisteröidy = () => {
 const [sähköposti, setemail] = useState("");
 const [salasana, aseta salasana] = useState("");
 const handleSubmit = (tapahtuma) => {
 event.preventDefault();
 console.log (sähköposti);
 };
 const handleEmail = (tapahtuma) => {
 setemail (tapahtuma.kohde.arvo);
 };
 const handlePassword = (tapahtuma) => {
 aseta salasana (tapahtuma.kohde.arvo);
 };
 paluu (


 id="sähköposti"
 name="sähköposti"
 type="email"
 placeholder="Sähköpostisi"
 arvo={email}
 onChange={handleEmail}
 />
 id="salasana"
 name="salasana"
 type="salasana"
 placeholder="Salasanasi"
 arvo={salasana}
 onChange={handlePassword}
 />




 );
};
viennin oletusrekisteri;

Yllä olevassa koodissa olet tilan alustaminen ja luodaan käsittelijäfunktio kullekin syöttökentälle. Vaikka tämä toimii, koodisi voi helposti tulla toistuvaksi ja sekavaksi, etenkin monien syöttökenttien kanssa. Vahvistuksen ja virheilmoitusten käsittelyn lisääminen on toinen haaste.

Formik tavoitteena on vähentää näitä ongelmia. Sen avulla on helppo käsitellä lomakkeen tilaa, vahvistaa ja lähettää lomaketietoja.

Lisää Formik reagoimaan

Ennen käyttöä formik, lisää se projektiisi käyttämällä npm.

npm asenna formik

Integroidaksesi Formikin, käytät käytä Formikia koukku. Sisään Register.js, tuo useFormik tiedoston yläosassa:

tuo { useFormik } "formikista"

Ensimmäinen vaihe on alustaa lomakearvot. Tässä tapauksessa alustat sähköpostin ja salasanan.

const formik = useFormik({
 alkuperäiset arvot: {
 sähköposti: "",
 Salasana: "",
 },
 onSubmit: arvot => {
// käsittelee lomakkeen lähetystä
 },
});

Olet myös lisäämässä onSubmit-funktiota, joka vastaanottaa lomakearvot ja käsittelee lomakkeen lähetyksen. Tällaisella rekisteröintilomakkeella tämä voi tarkoittaa uuden käyttäjän luomista tietokantaan.

Seuraava askel on käyttää formik objektia saadakseen lomakearvot tilaan ja ulos.

 id="sähköposti"
 name="sähköposti"
 type="email"
 placeholder="Sähköpostisi"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="salasana"
 name="salasana"
 type="salasana"
 placeholder="Salasanasi"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Yllä olevassa koodissa olet:

• Syöttökenttien antaminen an id ja nimi arvo on sama kuin se, jota käytettiin alustuksen aikana käytä Formikia koukku.
• Kentän arvon käyttäminen sen nimen avulla sen hakemiseen formik.values.
• Sidonta formik.handleChange onChange-tapahtumaan näyttääksesi syöttöarvot käyttäjän kirjoittaessa.
• Käyttämällä formik.handleBlur seurataksesi käytyjä peltoja.
• Sidonta formik.handleSubmit kohtaan onSubmitissa tapahtuma käynnistää onSubmitissa toiminto, jonka olet lisännyt käytä Formikia koukku.

Ota lomakkeen vahvistus käyttöön

Lomaketta luotaessa on tärkeää vahvistaa käyttäjän syötteet sen tekemisessä käyttäjän todennus helppoa, koska tallennat tiedot vain oikeassa muodossa. Lomakkeellasi voit esimerkiksi tarkistaa, onko annettu sähköposti voimassa ja onko salasanassa yli 8 merkkiä.

Voit vahvistaa lomakkeen määrittämällä vahvistusfunktion, joka hyväksyy lomakkeen arvot ja palauttaa virheobjektin.

Jos lisäät vahvistustoiminnon kohtaan käytä Formikia, kaikki löydetyt vahvistusvirheet ovat käytettävissä Formik.virheet, indeksoitu syötteen nimeen. Voit esimerkiksi tarkastella sähköpostikenttää koskevaa virhettä käyttämällä Formik.errors.email.

Sisään Register.js, luo vahvistaa toiminto ja sisällytä se siihen käytä Formikia.

const formik = useFormik({
 alkuperäiset arvot: {
 sähköposti: "",
 Salasana: "",
 },
 vahvista: () => {
 const errors = {};
 console.log (virheet)
 if (!formik.values.email) {
 errors.email = "Pakollinen";
 } muuten jos (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Virheellinen sähköpostiosoite";
 }
 if (!formik.values.password) {
 errors.password = "Pakollinen";
 } else if (formik.values.password.length < 8) {
 errors.password = "On oltava 8 merkkiä tai enemmän";
 }
 palautusvirheet;
 },
 onSubmit: (arvot) => {
 console.log("lähetetty!");
 // käsittelee lähetystä
 },
});

Lisää virheenkäsittely

Näytä seuraavaksi virheilmoitukset, jos niitä on. Käyttää Formik.kosketti tarkistaaksesi, onko kentällä käyty. Tämä estää virheen näyttämisen kentässä, jossa käyttäjä ei ole vielä käynyt.

 id="sähköposti"
 name="sähköposti"
 type="email"
 placeholder="Sähköpostisi"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: tyhjä}
 id="salasana"
 name="salasana"
 type="salasana"
 placeholder="Salasanasi"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: tyhjä}

Vahvista tiedot käyttämällä Yup

Formik tarjoaa helpomman tavan vahvistaa lomakkeita käyttämällä Jep kirjasto. Asenna yup aloittaaksesi.

npm asennus joo

Tuonti Jep sisään Register.js.

tuonti * kuten Yup sanasta "yup"

Sen sijaan, että kirjoittaisit oman mukautetun vahvistustoiminnon, käytä Yupia tarkistaaksesi, ovatko sähköposti ja salasana kelvollisia.

const formik = useFormik({
 alkuperäiset arvot: {
 sähköposti: "",
 Salasana: "",
 },
 validationSchema: Yup.object().shape({
 sähköposti: Yup.string()
 .email("Virheellinen sähköpostiosoite")
 .required("Pakollinen"),
 salasana: Yup.string()
 .min (8, "On oltava 8 merkkiä tai enemmän")
 .required("Pakollinen")
 }),
 onSubmit: (arvot) => {
 console.log("lähetetty!");
// käsittelee lähetystä
 },
});

Ja siinä se! Olet luonut yksinkertaisen rekisteröintilomakkeen Formikin ja Yupin avulla.

Kaiken päättäminen

Lomakkeet ovat olennainen osa kaikkia sovelluksia, koska niiden avulla voit kerätä käyttäjätietoja. Reactissa lomakkeiden luominen voi olla tuskallinen kokemus, varsinkin jos käsittelet paljon dataa tai useita lomakkeita. Formikin kaltainen työkalu tarjoaa helpon ja saumattoman tavan hakea ja vahvistaa lomakearvoja.

10 Reactin parasta käytäntöä, joita sinun on noudatettava vuonna 2022

Lue Seuraava

Kirjailijasta