Ako používať Formik na vytváranie formulárov v Reacte

Formik je knižnica na správu formulárov, ktorá poskytuje komponenty a háčiky na uľahčenie procesu vytvárania formulárov React. Formik sa za vás stará o stavy formulárov, validáciu a obsluhu chýb, čo uľahčuje zhromažďovanie a ukladanie používateľských údajov.

V tomto návode sa naučíte, ako môžete vytvoriť registračný formulár v React pomocou Formik. Ak chcete pokračovať, mali by ste byť spokojní s prácou s háčikmi React.

Vytvorte aplikáciu React

Použite aplikáciu create-react-app na vytvorte nový projekt React:

npx create-react-app formik-form

Teraz prejdite na formik-form/src priečinok a odstráňte všetky súbory okrem App.js.

Ďalej vytvorte nový súbor a pomenujte ho Register.js. Tu pridáte svoj formulár. Nezabudnite ho importovať App.js.

Vytvorte formulár reakcie

Formuláre React môžete vytvoriť pomocou riadených alebo neriadených komponentov. Riadený komponent je ten, ktorého formulárové údaje spracováva samotný React. Nekontrolovaný komponent je taký komponent, ktorého údaje formulára spracováva DOM.

Oficiálne Reagovať docs odporúčame použiť riadené komponenty. Umožňujú vám sledovať údaje formulára v miestnom stave, a teda mať plnú kontrolu nad formulárom.

Nižšie je uvedený príklad formulára vytvoreného pomocou riadeného komponentu.

import { useState } z "reagovať";
const Register = () => {
 const [e-mail, setemail] = useState("");
 const [heslo, setpassword] = useState("");
 const handleSubmit = (udalosť) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (udalosť) => {
 setemail (udalosť.cieľová.hodnota);
 };
 const handlePassword = (udalosť) => {
 setpassword (event.target.value);
 };
 vrátiť (


 id="e-mail"
 name="email"
 type="e-mail"
 placeholder="Váš email"
 value={email}
 onChange={handleEmail}
 />
 id="heslo"
 name="heslo"
 type="heslo"
 placeholder="Vaše heslo"
 value={password}
 onChange={handlePassword}
 />




 );
};
exportovať predvolený register;

Vo vyššie uvedenom kóde ste inicializácia stavu a vytvorenie funkcie obsluhy pre každé vstupné pole. Aj keď to funguje, váš kód sa môže ľahko opakovať a preplniť najmä mnohými vstupnými poľami. Ďalšou výzvou je pridanie validácie a spracovania chybových hlásení.

Formik má za cieľ znížiť tieto problémy. Uľahčuje manipuláciu so stavom formulárov, overovanie a odosielanie údajov formulárov.

Pridajte Formik do React

Pred použitím formik, pridajte ho do svojho projektu pomocou npm.

npm nainštalovať formik

Na integráciu Formik použijete použiteFormik háčik. In Register.js, importujte useFormik v hornej časti súboru:

import { useFormik } z "formik"

Prvým krokom je inicializácia hodnôt formulára. V tomto prípade inicializujete e-mail a heslo.

const formik = useFormik({
 počiatočné hodnoty: {
 email: "",
 heslo: "",
 },
 onSubmit: values ​​=> {
// spracovanie odoslania formulára
 },
});

Tiež pridávate funkciu onSubmit, ktorá prijíma hodnoty formulára a spracováva odoslanie formulára. Pre registračný formulár, ako je tento, to môže znamenať vytvorenie nového používateľa v databáze.

Ďalším krokom je použitie formik objekt, aby sa hodnoty formulára dostali do stavu a zo stavu.

 id="e-mail"
 name="email"
 type="e-mail"
 placeholder="Váš email"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="heslo"
 name="heslo"
 type="heslo"
 placeholder="Vaše heslo"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Vo vyššie uvedenom kóde ste:

• Zadaním vstupných polí an id a názov hodnota rovná hodnote použitej počas inicializácie v použiteFormik háčik.
• Prístup k hodnote poľa pomocou jeho názvu na jeho získanie formik.hodnoty.
• Väzba formik.handleZmeniť na udalosť onChange, aby sa zobrazili vstupné hodnoty, keď používateľ píše.
• Použitím formik.handleBlur sledovať navštívené polia.
• Väzba formik.handleOdoslať k onOdoslať udalosť na spustenie onOdoslať funkciu, ktorú ste pridali do použiteFormik háčik.

Povoliť overenie formulára

Pri vytváraní formulára je dôležité overiť používateľský vstup už pri jeho vytváraní overenie užívateľa jednoduché, pretože údaje ukladáte iba v správnom formáte. Vo formulári môžete napríklad skontrolovať, či je zadaný e-mail platný a či má heslo viac ako 8 znakov.

Na overenie formulára definujte funkciu overenia, ktorá akceptuje hodnoty formulára a vráti chybový objekt.

Ak pridáte funkciu overenia použiteFormik, každá nájdená chyba overenia bude dostupná v Formik.chyby, indexované podľa názvu vstupu. Napríklad k chybe v poli e-mailu môžete pristupovať pomocou Formik.errors.e-mail.

In Register.js, vytvorte potvrdiť funkciu a zahrnúť ju do použiteFormik.

const formik = useFormik({
 počiatočné hodnoty: {
 email: "",
 heslo: "",
 },
 overiť: () => {
 const errors = {};
 console.log (chyby)
 if (!formik.values.email) {
 errors.email = "Povinné";
 } ináč Ak (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Neplatná e-mailová adresa";
 }
 if (!formik.values.password) {
 errors.password = "Povinné";
 } else if (formik.values.password.length < 8) {
 errors.password = "Musí mať 8 alebo viac znakov";
 }
 chyby vrátenia;
 },
 onSubmit: (hodnoty) => {
 console.log("odoslané!");
 // spracovanie odoslania
 },
});

Pridať Spracovanie chýb

Ďalej zobrazte chybové hlásenia, ak existujú. Použite Formik.dotkol aby ste skontrolovali, či bolo pole navštívené. Tým sa zabráni zobrazeniu chyby pre pole, ktoré používateľ ešte nenavštívil.

 id="e-mail"
 name="email"
 type="e-mail"
 placeholder="Váš email"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nulový}
 id="heslo"
 name="heslo"
 type="heslo"
 placeholder="Vaše heslo"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: nulový}

Overte údaje pomocou Yup

Formik poskytuje jednoduchší spôsob overovania formulárov pomocou Áno knižnica. Ak chcete začať, nainštalujte ju.

npm nainštalovať áno

Importovať Áno v Register.js.

import * ako Yup z "yup"

Namiesto písania vlastnej funkcie overenia použite Yup na kontrolu platnosti e-mailu a hesla.

const formik = useFormik({
 počiatočné hodnoty: {
 email: "",
 heslo: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Neplatná e-mailová adresa")
 .required("Povinné"),
 heslo: Yup.string()
 .min (8, "Musí mať 8 alebo viac znakov")
 .required("Povinné")
 }),
 onSubmit: (hodnoty) => {
 console.log("odoslané!");
// spracovanie odoslania
 },
});

A je to! Vytvorili ste jednoduchý registračný formulár pomocou Formik a Yup.

Balenie všetkého

Formuláre sú neoddeliteľnou súčasťou každej aplikácie, pretože vám umožňujú zhromažďovať informácie o používateľoch. V Reacte môže byť vytváranie formulárov bolestivou skúsenosťou, najmä ak máte čo do činenia s množstvom údajov alebo viacerými formulármi. Nástroj ako Formik poskytuje jednoduchý a bezproblémový spôsob získavania a overovania hodnôt formulára.

10 najlepších postupov, ktoré musíte dodržiavať v roku 2022

Prečítajte si ďalej

O autorovi