Kaip naudoti Formik kuriant formas React

„Formik“ palengvina „React“ formų kūrimą. Štai kaip naudoti Formik kuriant formas React .

Formik & forms React

„Formik“ yra formų valdymo biblioteka, kurioje pateikiami komponentai ir kabliukai, kurie palengvina „React“ formų kūrimo procesą. Šiame straipsnyje su Download.vn sužinokime , kaip sukurti registracijos formą React naudojant Formik !

Kaip naudoti Formik kuriant formas React

• Sukurkite programą „React“.
• Sukurkite formą React
• Pridėkite Formik prie React
• Įgalinti formų autentifikavimą
• Pridėti klaidų tvarkymą
• Patvirtinkite duomenis naudodami „Yup“.

Sukurkite programą „React“.

Norėdami sukurti naują „React“ projektą, naudokite „create-react-app“ :

npx create-react-app formik-form

Dabar eikite į aplanką formik-form/src ir ištrinkite visus failus, išskyrus App.js . Tada sukurkite naują failą ir pavadinkite jį Register.js . Čia pridėsite formą. Nepamirškite importuoti jo į App.js .

Sukurkite formą React

„React“ galite kurti formas su kontroliuojamais komponentais arba ne.

• Iš valdymo komponento sugeneruotus formos duomenis tvarkys „React“.
• Formos duomenis, sugeneruotus iš nekontroliuojamų elementų, tvarko DOM.

„React“ skatina naudoti kontroliuojamus komponentus. Jie leidžia sekti formos duomenis vietoje, todėl galite visiškai valdyti formą.

Žemiau pateikiamas formos pavyzdys, sukurtas naudojant valdomą komponentą:

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;

Aukščiau pateiktame kode inicijuojate būseną ir sukuriate kiekvieno įvesties lauko tvarkyklės funkciją. Kol tai veikia, jūsų kodas gali pasikartoti ir pasikartoti, ypač jei yra daug įvesties laukų. Patvirtinimo ir klaidų pranešimų tvarkymo pridėjimas yra dar vienas iššūkis.

Formik gali sumažinti aukščiau nurodytą būklę. Tai palengvina būsenos tvarkymą, patvirtinimą ir duomenų įvedimą.

Pridėkite Formik prie React

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

npm install formik

Norėdami integruoti „Formik“, naudosite „useFormik“ kabliuką. Registre.js failo viršuje įveskite useFormik:

import { useFormik } from "formik"

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

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

Taip pat turite pridėti funkciją onSubmit, kuri gauna reikšmes ir tvarko formų pateikimą. Registracijos formai šis veiksmas sukuria naują vartotoją duomenų bazėje.

Kitas žingsnis yra naudoti formik objektą, kad gautumėte formos reikšmes į būseną ir iš jos.

Aukščiau pateiktame kode jūs esate:

• Pateikite įvesties laukus su ID ir pavadinimo reikšmėmis , atitinkančiomis reikšmes, naudotas inicijuojant naudojant useFormik kabliuką .
• Pasiekite lauko reikšmę naudodami jo pavadinimą, kad ištrauktumėte jį iš formik.values ​​​​.
• Susiekite formik.handleChange su įvykiu onChange , kad įvesties reikšmės būtų rodomos kaip naudotojo tipai.
• Norėdami sekti aplankytus laukus, naudokite formik.handleBlur .
• Susiekite formik.handleSubmit su įvykiu onSubmit , kad suaktyvintumėte funkciją onSubmit, kurią įtraukėte į useFormik kabliuką .

Įgalinti formų autentifikavimą

Kuriant formą įvesties patvirtinimas yra svarbus, nes užtikrina paprastą vartotojo autentifikavimą ir duomenys išsaugomi tinkamu formatu. Pavyzdžiui, galite patikrinti el. laiško galiojimą, slaptažodis turi visus reikiamus simbolius...

Norėdami patvirtinti formą šiame pavyzdyje, pasirinkite atitinkamą funkciją, priimkite formos reikšmes ir grąžinkite klaidos objektą.

Jei pridedate patvirtinimo funkciją į useFormik , visos rastos patvirtinimo klaidos bus Formik.errors , indeksuojamos įvesties lauko pavadinime. Pavyzdžiui, el. pašto laukų klaidas galite peržiūrėti naudodami Formik.errors.email .

Registre.js sukurkite patvirtinimo funkciją ir įtraukite ją į useFormik .

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

Pridėti klaidų tvarkymą

Tada parodykite klaidų pranešimus, jei tokių yra. Naudokite Formik.touched, kad patikrintumėte, ar tas laukas buvo aplankytas, ar ne. Taip išvengiama klaidos rodymo lauke, kurio vartotojas dar nepasiekė.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Patvirtinkite duomenis naudodami „Yup“.

Formik suteikia lengvesnį būdą patvirtinti formas naudojant Yup biblioteką. Norėdami pradėti, įdiekite „Yup“:

npm install yup

Registre.js įveskite yup .

import * as Yup from "yup"

Užuot rašę savo autentifikavimo funkciją, naudodami „Yup“ el. laiškų ir slaptažodžių galiojimui patikrinti bus greičiau.

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

Padaryta! Sukūrėte paprastą registracijos formą naudodami Formik ir Yup .

Aukščiau yra paprasčiausias būdas naudoti Formik kuriant formas React . Tikimės, kad šis straipsnis jums bus naudingas!