Kako koristiti Formik za stvaranje obrazaca u Reactu

Formik je knjižnica za upravljanje obrascima koja nudi komponente i kuke za olakšavanje procesa stvaranja React obrazaca. Formik se brine za stanja obrazaca, provjeru valjanosti i rukovaoce pogreškama umjesto vas što olakšava prikupljanje i pohranu korisničkih podataka.

U ovom vodiču naučit ćete kako možete stvoriti obrazac za registraciju u Reactu koristeći Formik. Da biste to pratili, trebali biste biti udobni u radu s React kukicama.

Napravite React aplikaciju

Koristite aplikaciju create-react-app za stvoriti novi React projekt:

npx create-react-app formik-form

Sada idite na formik-forma/src mapu i izbrišite sve datoteke osim App.js.

Zatim stvorite novu datoteku i dajte joj naziv Register.js. Ovdje ćete dodati svoj obrazac. Ne zaboravite ga uvesti App.js.

Napravite React obrazac

Možete kreirati React obrasce koristeći kontrolirane ili nekontrolirane komponente. Kontrolirana komponenta je ona čijim podacima obrasca upravlja sam React. Nekontrolirana komponenta je ona čiji podaci obrasca obrađuju DOM.

Službenik React dokumenti preporučujemo korištenje kontroliranih komponenti. Omogućuju vam da pratite podatke obrasca u lokalnom stanju i stoga imate potpunu kontrolu nad obrascem.

U nastavku je primjer obrasca kreiranog pomoću kontrolirane komponente.

import { useState } iz "react";
const Registar = () => {
 const [e-pošta, setemail] = useState("");
 const [password, setpassword] = useState("");
 const handleSubmit = (događaj) => {
 event.preventDefault();
 console.log (e-pošta);
 };
 const handleEmail = (događaj) => {
 setemail (event.target.value);
 };
 const handlePassword = (događaj) => {
 setpassword (event.target.value);
 };
 vratiti (


 id="e-pošta"
 ime="e-pošta"
 type="e-pošta"
 placeholder="Vaša e-pošta"
 vrijednost={e-pošta}
 onChange={handleEmail}
 />
 id="lozinka"
 ime="lozinka"
 type="password"
 placeholder="Vaša lozinka"
 vrijednost={lozinka}
 onChange={handlePassword}
 />




 );
};
izvoz zadani registar;

U gornjem kodu jesi inicijaliziranje stanja i stvaranje funkcije rukovatelja za svako polje unosa. Iako ovo funkcionira, vaš se kod lako može ponavljati i zatrpati, posebno s mnogim poljima za unos. Dodavanje provjere valjanosti i rukovanja porukama o pogreškama još je jedan izazov.

Formik ima za cilj smanjenje ovih problema. Olakšava rukovanje stanjem obrasca, provjeru valjanosti i slanje podataka obrasca.

Dodajte Formik u React

Prije upotrebe formik, dodajte ga u svoj projekt pomoću npm.

npm instalirajte formik

Za integraciju Formika, koristit ćete useFormik kuka. U Register.js, uvezite useFormik na vrh datoteke:

import { useFormik } iz "formik"

Prvi korak je inicijalizacija vrijednosti obrasca. U tom ćete slučaju inicijalizirati email i lozinku.

const formik = useFormik({
 početne vrijednosti: {
 email: "",
 lozinka: "",
 },
 onSubmit: vrijednosti => {
// upravljati podnošenjem obrasca
 },
});

Također dodajete funkciju onSubmit koja prima vrijednosti obrasca i upravlja slanjem obrasca. Za obrazac za registraciju poput ovog, to bi moglo značiti stvaranje novog korisnika u bazi podataka.

Sljedeći korak je korištenje formik objekt za unos vrijednosti oblika i izvan stanja.

 id="e-pošta"
 ime="e-pošta"
 type="e-pošta"
 placeholder="Vaša e-pošta"
 vrijednost={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="lozinka"
 ime="lozinka"
 type="password"
 placeholder="Vaša lozinka"
 vrijednost={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

U gornjem kodu, vi ste:

• Davanje polja za unos an iskaznica i Ime vrijednost jednaka onoj korištenoj tijekom inicijalizacije u useFormik kuka.
• Pristup vrijednosti polja, korištenje njegovog imena za njegovo dohvaćanje formik.vrijednosti.
• Uvezivanje formik.handleChange na događaj onChange za prikaz ulaznih vrijednosti kako tipovi korisnika.
• Korištenje formik.handleBlur za praćenje posjećenih polja.
• Uvezivanje formik.handleSubmit prema onSubmit događaj koji pokreće onSubmit funkciju koju ste dodali useFormik kuka.

Omogućite provjeru valjanosti obrasca

Prilikom izrade obrasca važno je provjeriti valjanost korisničkog unosa kako ga čini autentifikaciju korisnika jednostavno jer podatke pohranjujete samo u ispravnom formatu. U svom obrascu, na primjer, možete provjeriti je li navedeni email ispravan i ima li lozinka više od 8 znakova.

Za provjeru valjanosti obrasca definirajte funkciju provjere koja prihvaća vrijednosti obrasca i vraća objekt pogreške.

Ako dodate funkciju provjere valjanosti u useFormik, svaka pronađena pogreška provjere bit će dostupna u Formik.pogreške, indeksirano na nazivu ulaza. Na primjer, možete pristupiti pogrešci o polju e-pošte pomoću Formik.errors.email.

U Register.js, stvorite potvrditi funkcionirati i uključiti ga useFormik.

const formik = useFormik({
 početne vrijednosti: {
 email: "",
 lozinka: "",
 },
 potvrditi: () => {
 const pogreške = {};
 console.log (pogreške)
 if (!formik.values.email) {
 errors.email = "Obavezno";
 } inače ako (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Nevažeća adresa e-pošte";
 }
 if (!formik.values.password) {
 errors.password = "Obavezno";
 } else if (formik.values.password.length < 8) {
 errors.password = "Mora sadržavati 8 znakova ili više";
 }
 povratne pogreške;
 },
 onSubmit: (vrijednosti) => {
 console.log("poslano!");
 // obrađivati ​​podnošenje
 },
});

Dodajte rukovanje pogreškama

Zatim prikažite poruke o pogrešci ako postoje. Koristiti Formik.dirnut provjeriti je li polje posjećeno. To sprječava prikazivanje pogreške za polje koje korisnik još nije posjetio.

 id="e-pošta"
 ime="e-pošta"
 type="e-pošta"
 placeholder="Vaša e-pošta"
 vrijednost={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: null}
 id="lozinka"
 ime="lozinka"
 type="password"
 placeholder="Vaša lozinka"
 vrijednost={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: null}

Potvrdite podatke pomoću Yup

Formik pruža lakši način za provjeru valjanosti obrazaca pomoću da knjižnica. Instalirajte yup za početak.

npm instaliraj da

Uvoz da u Register.js.

uvoz * kao da iz "ja"

Umjesto da pišete vlastitu prilagođenu funkciju provjere valjanosti, upotrijebite Yup da provjerite jesu li e-pošta i lozinka ispravne.

const formik = useFormik({
 početne vrijednosti: {
 email: "",
 lozinka: "",
 },
 validationSchema: Da.object().shape({
 e-pošta: Da.string()
 .email("Nevažeća adresa e-pošte")
 .required("Obavezno"),
 lozinka: da.string()
 .min (8, "Mora biti 8 znakova ili više")
 .required("Obavezno")
 }),
 onSubmit: (vrijednosti) => {
 console.log("poslano!");
// obrađivati ​​podnošenje
 },
});

I to je to! Napravili ste jednostavan obrazac za registraciju koristeći Formik i Yup.

Zamatanje svega

Obrasci su sastavni dio svake aplikacije jer vam omogućuju prikupljanje korisničkih podataka. U Reactu stvaranje obrazaca može biti bolno iskustvo, pogotovo ako imate posla s puno podataka ili više oblika. Alat kao što je Formik pruža jednostavan i besprijekoran način dohvaćanja i provjere vrijednosti obrasca.

10 React najboljih praksi koje trebate slijediti u 2022

Pročitajte dalje

O autoru