Jak používat Formik k vytváření formulářů v Reactu

Formik je knihovna pro správu formulářů, která poskytuje komponenty a háčky pro usnadnění procesu vytváření formulářů React. Formik se za vás stará o stavy formulářů, ověřování a zpracování chyb, což usnadňuje shromažďování a ukládání uživatelských dat.

V tomto tutoriálu se dozvíte, jak můžete vytvořit registrační formulář v Reactu pomocí Formik. Chcete-li pokračovat, měli byste být schopni pracovat s háky React.

Vytvořte aplikaci React

Použijte create-react-app k vytvořit nový projekt React:

npx create-react-app formik-form

Nyní přejděte na formik-form/src složku a odstraňte všechny soubory kromě App.js.

Dále vytvořte nový soubor a pojmenujte jej Register.js. Zde přidáte svůj formulář. Nezapomeňte jej importovat App.js.

Vytvořte formulář reakce

Formuláře React můžete vytvořit pomocí řízených komponent nebo neřízených komponent. Řízená komponenta je taková, jejíž data formuláře zpracovává samotný React. Neřízená komponenta je komponenta, jejíž data formuláře zpracovává DOM.

Oficiální Reagovat docs

doporučujeme používat řízené komponenty. Umožňují vám sledovat data formuláře v místním stavu a mít tedy plnou kontrolu nad formulářem.

Níže je uveden příklad formuláře vytvořeného pomocí řízené komponenty.

import { useState } z "reagovat";
const Register = () => {
 const [e-mail, setemail] = useState("");
 const [heslo, setpassword] = useState("");
 const handleSubmit = (událost) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (událost) => {
 setemail (event.target.value);
 };
 const handlePassword = (událost) => {
 setpassword (event.target.value);
 };
 vrátit se (


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




 );
};
exportovat výchozí Registr;

Ve výše uvedeném kódu jste inicializace stavu a vytvoření funkce handleru pro každé vstupní pole. I když to funguje, váš kód se může snadno opakovat a může být přeplněný, zejména s mnoha vstupními poli. Další výzvou je přidání ověřování a zpracování chybových zpráv.

Formik má za cíl tyto problémy omezit. Usnadňuje manipulaci se stavem formuláře, ověřování a odesílání dat formuláře.

Přidejte Formik do React

Před použitím formik, přidejte jej do svého projektu pomocí npm.

npm nainstalovat formik

Pro integraci Formiku použijete použijteFormik háček. v Register.js, importujte useFormik v horní části souboru:

import { useFormik } z "formik"

Prvním krokem je inicializace hodnot formuláře. V tomto případě inicializujete e-mail a heslo.

const formik = useFormik({
 počáteční hodnoty: {
 e-mailem: "",
 Heslo: "",
 },
 onSubmit: values ​​=> {
// zpracování odeslání formuláře
 },
});

Přidáváte také funkci onSubmit, která přijímá hodnoty formuláře a zpracovává odeslání formuláře. Pro registrační formulář, jako je tento, to může znamenat vytvoření nového uživatele v databázi.

Dalším krokem je použití formik objekt k získání hodnot formuláře do stavu a ze stavu.

 id="e-mail"
 name="e-mail"
 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}
 />

Ve výše uvedeném kódu jste:

• Zadáním vstupních polí an id a název hodnota rovna hodnotě použité při inicializaci v použijteFormik háček.
• Přístup k hodnotě pole, použití jeho názvu k jeho načtení formik.hodnoty.
• Vazba formik.handleZměnit k události onChange, aby se zobrazily vstupní hodnoty, když uživatel píše.
• Použitím formik.handleBlur sledovat navštívená pole.
• Vazba formik.handleOdeslat k na Odeslat událost, která spustí na Odeslat funkce, kterou jste přidali do použijteFormik háček.

Povolit ověření formuláře

Při vytváření formuláře je důležité ověřovat uživatelský vstup již při jeho vytváření Ověření uživatele snadné, protože data ukládáte pouze ve správném formátu. Ve formuláři můžete například zkontrolovat, zda je zadaný e-mail platný a zda má heslo více než 8 znaků.

Pro ověření formuláře definujte ověřovací funkci, která přijímá hodnoty formuláře a vrací chybový objekt.

Pokud přidáte funkci ověření do použijteFormik, jakákoli nalezená chyba ověření bude k dispozici v Formik.chyby, indexované podle názvu vstupu. Například můžete získat přístup k chybě o poli e-mailu pomocí Formik.errors.e-mail.

v Register.js, vytvořit ověřit funkci a zahrnout ji do použijteFormik.

const formik = useFormik({
 počáteční hodnoty: {
 e-mailem: "",
 Heslo: "",
 },
 ověřit: () => {
 const errors = {};
 console.log (chyby)
 if (!formik.values.email) {
 errors.email = "Povinné";
 } jinak pokud (
 !/^[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í mít 8 nebo více znaků";
 }
 chyby vrácení;
 },
 onSubmit: (hodnoty) => {
 console.log("odesláno!");
 // zpracování odeslání
 },
});

Přidat Zpracování chyb

Dále zobrazte chybové zprávy, pokud existují. Použití Formik.dotkl zkontrolovat, zda bylo pole navštíveno. Tím se zabrání zobrazení chyby u pole, které uživatel ještě nenavštívil.

 id="e-mail"
 name="e-mail"
 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}
: nula}
 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}
: nula}

Ověření dat pomocí Yup

Formik poskytuje snazší způsob ověřování formulářů pomocí Ano knihovna. Chcete-li začít, nainstalujte ju.

npm nainstalovat jo

Import jo v Register.js.

import * jako Ano z "ju"

Namísto psaní vlastní funkce ověřování použijte Ano ke kontrole platnosti e-mailu a hesla.

const formik = useFormik({
 počáteční hodnoty: {
 e-mailem: "",
 Heslo: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Neplatná e-mailová adresa")
 .required("Povinné"),
 heslo: Yup.string()
 .min (8, "Musí mít 8 nebo více znaků")
 .required("Povinné")
 }),
 onSubmit: (hodnoty) => {
 console.log("odesláno!");
// zpracování odeslání
 },
});

A to je vše! Vytvořili jste jednoduchý registrační formulář pomocí Formik a Yup.

Balení všeho nahoru

Formuláře jsou nedílnou součástí každé aplikace, protože vám umožňují shromažďovat informace o uživatelích. V Reactu může být vytváření formulářů bolestivým zážitkem, zejména pokud pracujete s velkým množstvím dat nebo více formulářů. Nástroj jako Formik poskytuje snadný a bezproblémový způsob získávání a ověřování hodnot formuláře.

10 React Best Practices, které musíte dodržovat v roce 2022

Přečtěte si další

O autorovi