Kuinka käyttää Formikia lomakkeiden luomiseen Reactissa

Formik helpottaa lomakkeiden luomista Reactissa. Näin voit käyttää Formikia lomakkeiden luomiseen Reactissa .

Formik & lomakkeet Reactissa

Formik on lomakkeiden hallintakirjasto, joka sisältää komponentteja ja koukkuja, jotka yksinkertaistavat React-lomakkeiden luomista. Tässä artikkelissa opetellaan Download.vn:n avulla rekisteröintilomakkeen luominen Reactissa Formikin avulla !

Kuinka käyttää Formikia lomakkeiden luomiseen Reactissa

• Luo React-sovellus
• Luo lomake Reactissa
• Lisää Formik reagoimaan
• Ota lomakkeiden todennus käyttöön
• Lisää virheenkäsittely
• Vahvista tiedot käyttämällä Yup

Luo React-sovellus

Käytä create-react-sovellusta uuden React-projektin luomiseen:

npx create-react-app formik-form

Siirry nyt formik-form/src- kansioon ja poista kaikki tiedostot paitsi App.js. Luo seuraavaksi uusi tiedosto ja anna sille nimi Register.js . Tähän voit lisätä lomakkeen. Muista tuoda se App.js- tiedostoon .

Luo lomake Reactissa

Voit luoda Reactissa lomakkeita ohjatuilla komponenteilla tai ilman.

• React käsittelee ohjauskomponentista luotuja lomaketietoja.
• DOM käsittelee hallitsemattomista elementeistä luotuja lomaketietoja.

React kannustaa käyttämään kontrolloituja komponentteja. Niiden avulla voit seurata lomaketietoja paikallisesti, joten sinulla on täysi hallintalomake.

Alla on esimerkkilomake, joka on luotu ohjatulla komponentilla:

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;

Yllä olevassa koodissa olet alustamassa tilaa ja luomassa käsittelijän toiminnon jokaiselle syöttökentälle. Vaikka se toimii, koodisi voi tulla toistuvaksi ja sotkuiseksi, varsinkin jos syöttökenttiä on useita. Vahvistuksen ja virheilmoitusten käsittelyn lisääminen on toinen haaste.

Formik voi vähentää yllä olevaa tilaa. Se tekee tilankäsittelystä, validoinnista ja tietojen syöttämisestä helppoa.

Lisää Formik reagoimaan

Ennen kuin käytät formikia , lisää se projektiisi npm:llä.

npm install formik

Integroidaksesi Formikin, käytät useFormik-koukkua. Kirjoita Register.js:ssä useFormik tiedoston yläosaan:

import { useFormik } from "formik"

Ensimmäinen vaihe on lomakearvojen määrittäminen. Tässä tapauksessa alustat sähköpostiosoitteesi ja salasanasi.

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

Sinun on myös lisättävä onSubmit-toiminto, joka hakee arvot ja käsittelee lomakkeiden lähettämisen. Rekisteröintilomakkeelle tämä toiminto luo uuden käyttäjän tietokantaan.

Seuraava askel on käyttää formik-objektia lomakearvojen saamiseen tilaan ja pois.

Yllä olevassa koodissa olet:

• Anna syöttökentät, joissa on id- ja nimiarvot , jotka vastaavat useFormik- koukun alustuksen aikana käytettyjä arvoja .
• Käytä kentän arvoa poimimalla sen nimestä formik.values > .
• Sido formik.handleChange onChange- tapahtumaan näyttääksesi syöttöarvot käyttäjätyypeinä.
• Käytä formik.handleBluria seurataksesi käytyjä kenttiä.
• Sido formik.handleSubmit onSubmit- tapahtumaan käynnistääksesi onSubmit-funktion, jonka olet lisännyt useFormik- koukkuun .

Ota lomakkeiden todennus käyttöön

Lomaketta luotaessa syötteiden validointi on tärkeää, koska se varmistaa, että käyttäjän todennus on helppoa ja tiedot tallennetaan oikeassa muodossa. Voit esimerkiksi tarkistaa sähköpostin oikeellisuuden, salasanassa on kaikki tarvittavat merkit...

Vahvistaaksesi lomakkeen tässä esimerkissä, valitse sopiva funktio, hyväksy lomakkeen arvot ja palauta virheobjekti.

Jos lisäät vahvistustoiminnon useFormik -sovellukseen , kaikki löydetyt vahvistusvirheet ovat Formik.errors- hakemistossa syöttökentän nimessä. Voit esimerkiksi tarkastella sähköpostikenttien virheitä käyttämällä Formik.errors.email .

Luo Register.js: ssä validointifunktio ja sisällytä se useFormikiin .

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
 },
});

Lisää virheenkäsittely

Näytä seuraavaksi mahdolliset virheilmoitukset. Käytä Formik.touchedia tarkistaaksesi, onko kyseisessä kentässä käyty vai ei. Tämä välttää virheen näyttämisen kentässä, jota käyttäjä ei ole vielä käyttänyt.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Vahvista tiedot käyttämällä Yup

Formik tarjoaa helpomman tavan vahvistaa lomakkeita Yup-kirjaston avulla. Asenna Yup aloittaaksesi:

npm install yup

Kirjoita yup kohtaan Register.js .

import * as Yup from "yup"

Sen sijaan, että kirjoittaisit oman todennustoiminnon, Yupilla sähköpostien ja salasanojen oikeellisuuden tarkistaminen on nopeampaa.

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
 },
});

Se on tehty! Olet luonut yksinkertaisen rekisteröintilomakkeen Formikin ja Yupin avulla .

Yllä on yksinkertaisin tapa käyttää Formikia lomakkeiden luomiseen Reactissa . Toivottavasti tämä artikkeli on hyödyllinen sinulle!