A Formik használata űrlapok létrehozására a Reactban

A Formik megkönnyíti az űrlapok létrehozását a Reactban. Így használhatja a Formik-ot űrlapok létrehozásához a React alkalmazásban .

Formik & forms in React

A Formik egy űrlapkezelő könyvtár, amely olyan összetevőket és akasztókat tartalmaz, amelyek egyszerűbbé teszik a React űrlapok létrehozásának folyamatát. Ebben a cikkben megtudjuk, hogyan hozhat létre regisztrációs űrlapot a Reactban a Formik segítségével a Download.vn segítségével !

A Formik használata űrlapok létrehozására a Reactban

• Hozzon létre egy React alkalmazást
• Hozzon létre egy űrlapot a Reactban
• Adja hozzá a Formik-ot a Reacthoz
• Űrlap-hitelesítés engedélyezése
• Hibakezelés hozzáadása
• Érvényesítse az adatokat a Yup használatával

Hozzon létre egy React alkalmazást

A create-react-app használatával új React projektet hozhat létre:

npx create-react-app formik-form

Most lépjen a formik-form/src mappába , és törölje az összes fájlt az App.js kivételével . Ezután hozzon létre egy új fájlt, és nevezze el Register.js . Itt kell hozzáadni az űrlapot. Ne felejtse el importálni az App.js fájlba .

Hozzon létre egy űrlapot a Reactban

Létrehozhat űrlapokat a React alkalmazásban ellenőrzött összetevőkkel vagy anélkül.

• A vezérlőkomponensből generált űrlapadatokat a React kezeli.
• A nem ellenőrzött elemekből előállított űrlapadatokat a DOM kezeli.

A React arra ösztönzi, hogy ellenőrzött komponenseket használjon. Lehetővé teszik az űrlapadatok helyi nyomon követését, így teljes ellenőrzése alatt áll az űrlap felett.

Az alábbiakban egy ellenőrzött komponenssel létrehozott űrlappélda látható:

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;

A fenti kódban inicializálja az állapotot, és minden beviteli mezőhöz létrehoz egy kezelő függvényt. Míg működik, a kód ismétlődővé és rendetlenné válhat, különösen, ha sok beviteli mező van. Egy másik kihívás az érvényesítés és a hibaüzenetek kezelésének hozzáadása.

A Formik csökkentheti a fenti állapotot. Könnyűvé teszi az állapotkezelést, az érvényesítést és az adatbevitelt.

Adja hozzá a Formik-ot a Reacthoz

A formik használata előtt adja hozzá a projekthez az npm segítségével.

npm install formik

A Formik integrálásához használja a useFormik hook-ot. A Register.js-ben írja be a useFormik-ot a fájl tetejére:

import { useFormik } from "formik"

Az első lépés az űrlapértékek beállítása. Ebben az esetben inicializálja e-mail címét és jelszavát.

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

Ezenkívül hozzá kell adnia egy onSubmit függvényt, amely lekéri az értékeket és kezeli az űrlapok beküldését. Regisztrációs űrlap esetén ez a művelet új felhasználót hoz létre az adatbázisban.

A következő lépés a formik objektum használata az űrlapértékek állapotba és állapoton kívüli megjelenítéséhez.

A fenti kódban Ön:

• Adja meg a beviteli mezőket azonosító és névértékekkel , amelyek megegyeznek az inicializálás során használt értékekkel a useFormik hook segítségével .
• Hozzáférhet egy mező értékéhez a nevével, hogy kivonja a formik.valuesből .
• Kösd a formik.handleChange-et az onChange eseményhez , hogy a bemeneti értékeket felhasználói típusként jelenítse meg.
• A formik.handleBlur használatával nyomon követheti a meglátogatott mezőket.
• Kösd a formik.handleSubmit elemet az onSubmit eseményhez az onSubmit függvény aktiválásához, amelyet a useFormik hook-hoz adott .

Űrlap-hitelesítés engedélyezése

Űrlap létrehozásakor fontos a bemeneti ellenőrzés, mivel ez biztosítja a felhasználó hitelesítésének egyszerűségét és az adatok megfelelő formátumban történő mentését. Például ellenőrizheti az e-mail érvényességét, a jelszó minden szükséges karaktert tartalmaz...

Az űrlap érvényesítéséhez ebben a példában válassza ki a megfelelő függvényt, fogadja el az űrlapértékeket, és adjon vissza egy hibaobjektumot.

Ha egy érvényesítési függvényt ad hozzá a useFormik -hoz, akkor a talált érvényesítési hibák a Formik.errors fájlban lesznek , a beviteli mező nevében indexelve. Például megtekintheti az e-mail mezőkkel kapcsolatos hibákat a Formik.errors.email használatával .

A Register.js -ben hozzon létre egy érvényesítési függvényt , és foglalja bele a useFormik- ba .

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

Hibakezelés hozzáadása

Ezután jelenítse meg a hibaüzeneteket, ha vannak ilyenek. A Formik.touched segítségével ellenőrizze, hogy az adott mezőt meglátogatták-e vagy sem. Ezzel elkerülhető, hogy hiba jelenjen meg abban a mezőben, amelyhez a felhasználó még nem fér hozzá.

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

{formik.errors.email}

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

{formik.errors.password}

: null}

Érvényesítse az adatokat a Yup használatával

A Formik egyszerűbb módot kínál az űrlapok érvényesítésére a Yup könyvtár használatával. Telepítse a Yup-ot a kezdéshez:

npm install yup

Írja be a yup parancsot a Register.js- be .

import * as Yup from "yup"

Ahelyett, hogy saját hitelesítési funkciót írna, gyorsabb lesz a Yup használatával az e-mailek és jelszavak érvényességének ellenőrzése.

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

Kész! Létrehozott egy egyszerű regisztrációs űrlapot a Formik és a Yup segítségével .

A fenti a legegyszerűbb módja a Formik használatának űrlapok létrehozására a React alkalmazásban . Reméljük, hogy ez a cikk hasznos az Ön számára!