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

Formik usnadňuje vytváření formulářů v Reactu. Zde je návod, jak používat Formik k vytváření formulářů v Reactu .

Formik a formuláře v Reactu

Formik je knihovna pro správu formulářů, která poskytuje komponenty a háčky, které zjednodušují proces vytváření formulářů React. V tomto článku se s Download.vn naučíme , jak vytvořit registrační formulář v Reactu pomocí Formiku !

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

• Vytvořte aplikaci React
• Vytvořte formulář v Reactu
• Přidejte Formik do React
• Povolit ověřování formulářů
• Přidejte zpracování chyb
• Ověřte data pomocí Yup

Vytvořte aplikaci React

Použijte create-react-app k vytvoření nového projektu React:

npx create-react-app formik-form

Nyní přejděte do složky formik-form/src a odstraňte všechny soubory kromě App.js . Dále vytvořte nový soubor a pojmenujte jej Register.js . Zde přidáte formulář. Nezapomeňte jej importovat do App.js .

Vytvořte formulář v Reactu

Formuláře v Reactu můžete vytvářet s řízenými komponentami nebo ne.

• Data formuláře vygenerovaná z ovládací komponenty bude zpracována Reactem.
• Data formuláře generovaná z neřízených prvků jsou zpracovávána DOM.

React vás vyzývá k používání řízených komponent. Umožňují vám sledovat data formuláře lokálně, takže máte plnou kontrolu nad formulářem.

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

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;

Ve výše uvedeném kódu inicializujete stav a vytváříte obslužnou funkci pro každé vstupní pole. I když to funguje, váš kód se může opakovat a může být chaotický, zejména pokud existuje mnoho vstupních polí. Další výzvou je přidání ověřování a zpracování chybových zpráv.

Formik může výše uvedený stav snížit. Díky tomu je manipulace se stavy, ověřování a zadávání dat hračkou.

Přidejte Formik do React

Před použitím formiku jej přidejte do projektu pomocí npm.

npm install formik

Pro integraci Formik použijete háček useFormik. V Register.js zadejte useFormik v horní části souboru:

import { useFormik } from "formik"

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

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

Musíte také přidat funkci onSubmit, která získává hodnoty a zpracovává odeslání formuláře. U registračního formuláře tato akce vytvoří nového uživatele v databázi.

Dalším krokem je použití objektu formik k získání hodnot formuláře ve stavu a mimo něj.

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

• Zadejte vstupní pole s hodnotami id a name ekvivalentní hodnotám použitým při inicializaci pomocí háčku useFormik .
• Získejte přístup k hodnotě pole pomocí jeho názvu k extrahování z formik.values ​​​​.
• Navažte formik.handleChange na událost onChange , abyste zobrazili vstupní hodnoty jako typy uživatelů.
• Použijte formik.handleBlur ke sledování navštívených polí.
• Spojte formik.handleSubmit s událostí onSubmit , aby se spustila funkce onSubmit, kterou jste přidali do háku useFormik .

Povolit ověřování formulářů

Při vytváření formuláře je důležitá validace vstupu, protože zajišťuje snadné ověření uživatele a uložení dat ve správném formátu. Můžete si například zkontrolovat platnost emailu, heslo má všechny potřebné znaky...

Chcete-li ověřit formulář v tomto příkladu, vyberte příslušnou funkci, přijměte hodnoty formuláře a vraťte chybový objekt.

Pokud do useFormik přidáte ověřovací funkci , všechny nalezené chyby ověření budou ve Formik.errors indexované podle názvu vstupního pole. Chyby v e-mailových polích můžete například zobrazit pomocí Formik.errors.email .

V Register.js vytvořte funkci ověření a zahrňte ji do 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
 },
});

Přidejte zpracování chyb

Dále zobrazte případné chybové zprávy. Pomocí Formik.touched zkontrolujte, zda bylo toto pole navštíveno nebo ne. Tím se zabrání zobrazení chyby v poli, kam uživatel ještě nevstoupil.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Ověřte data pomocí Yup

Formik poskytuje jednodušší způsob ověřování formulářů pomocí knihovny Yup. Chcete-li začít, nainstalujte Yup:

npm install yup

Zadejte yup do Register.js .

import * as Yup from "yup"

Místo psaní vlastní autentizační funkce bude použití Yup ke kontrole platnosti e-mailů a hesel rychlejší.

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

Je to hotovo! Vytvořili jste jednoduchý registrační formulář pomocí Formik a Yup .

Výše je nejjednodušší způsob, jak používat Formik k vytváření formulářů v Reactu . Doufám, že tento článek je pro vás užitečný!