Hogyan használjuk a Formik-ot űrlapok létrehozására a React alkalmazásban

A Formik egy űrlapkezelő könyvtár, amely összetevőket és akasztókat biztosít a React űrlapok létrehozásának megkönnyítésére. A Formik gondoskodik az űrlapállapotokról, az érvényesítésről és a hibakezelőkről, ami megkönnyíti a felhasználói adatok gyűjtését és tárolását.

Ebből az oktatóanyagból megtudhatja, hogyan hozhat létre regisztrációs űrlapot a React alkalmazásban a Formik segítségével. A folytatáshoz kényelmesen kell dolgoznia a React horgokkal.

Hozzon létre egy React alkalmazást

Használja a Create-React-alkalmazást hozzon létre egy új React projektet:

npx Create-React-app formik-form

Most navigáljon a formik-form/src mappát, és törölje az összes fájlt, kivéve App.js.

Ezután hozzon létre egy új fájlt, és nevezze el Register.js. Itt kell hozzáadnia az űrlapot. Ne felejtse el importálni App.js.

Hozzon létre egy reakcióűrlapot

Létrehozhat React űrlapokat szabályozott vagy nem ellenőrzött összetevők használatával. A vezérelt komponens az, amelynek űrlapadatait maga a React kezeli. Nem ellenőrzött összetevő az, amelynek űrlapadatait a DOM kezeli.

A hivatalos React docs ellenőrzött alkatrészek használatát javasoljuk. Lehetővé teszik az űrlap adatainak nyomon követését a helyi államban, és így teljes ellenőrzést gyakorolhatnak az űrlap felett.

Az alábbiakban egy példa látható egy ellenőrzött komponens használatával létrehozott űrlapra.

import { useState } from "react";
const Regisztráció = () => {
 const [e-mail, setemail] = useState("");
 const [jelszó, jelszó beállítása] = useState("");
 const handleSubmit = (esemény) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (esemény) => {
 setemail (event.target.value);
 };
 const handlePassword = (esemény) => {
 jelszó beállítása (event.target.value);
 };
 Visszatérés (


 id="e-mail"
 name="email"
 type="email"
 placeholder="Az Ön e-mailje"
 érték={e-mail}
 onChange={handleEmail}
 />
 id="jelszó"
 name="jelszó"
 type="jelszó"
 placeholder="Az Ön jelszava"
 érték={jelszó}
 onChange={handlePassword}
 />




 );
};
export default Register;

A fenti kódban Ön az állapot inicializálása és minden egyes beviteli mezőhöz létrehozunk egy kezelő függvényt. Bár ez működik, a kód könnyen ismétlődővé és zsúfolttá válhat, különösen sok beviteli mező esetén. További kihívást jelent az érvényesítés és a hibaüzenetek kezelésének hozzáadása.

Formik célja ezeknek a problémáknak a csökkentése. Könnyűvé teszi az űrlap állapotának kezelését, az űrlapadatok érvényesítését és beküldését.

Adja hozzá a Formik-ot a Reacthoz

Használat előtt formiksegítségével adja hozzá projektjéhez npm.

npm install formik

A Formik integrálásához használja a useFormik horog. Ban ben Register.js, importálja a useFormik-ot a fájl tetején:

import { useFormik } a "formik"-ból

Az első lépés az űrlapértékek inicializálása. Ebben az esetben inicializálja az e-mail címet és a jelszót.

const formik = useFormik({
 kezdeti értékek: {
 email: "",
 Jelszó: "",
 },
 onSubmit: értékek => {
// űrlap benyújtásának kezelése
 },
});

Ezenkívül hozzáadja az onSubmit függvényt, amely fogadja az űrlapértékeket, és kezeli az űrlap elküldését. Egy ilyen regisztrációs űrlap esetén ez új felhasználó létrehozását jelentheti az adatbázisban.

A következő lépés a formik objektumot, hogy az űrlapértékeket állapotba és állapoton kívülre hozza.

 id="e-mail"
 name="email"
 type="email"
 placeholder="Az Ön e-mailje"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="jelszó"
 name="jelszó"
 type="jelszó"
 placeholder="Az Ön jelszava"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

A fenti kódban Ön:

• A beviteli mezők megadása an id és név érték megegyezik az inicializálás során használt értékkel useFormik horog.
• Egy mező értékének elérése, a nevének használata a lekéréshez formik.értékek.
• Kötés formik.handleChange az onChang eseményre, hogy a bemeneti értékeket a felhasználó által beírt módon jelenítse meg.
• Használata formik.handleBlur hogy nyomon kövesse a felkeresett mezőket.
• Kötés formik.handleSubmit hoz onSubmit esemény kiváltására a onSubmit funkcióhoz adott hozzá useFormik horog.

Űrlapérvényesítés engedélyezése

Űrlap létrehozásakor fontos ellenőrizni a felhasználói bevitelt annak elkészítésekor felhasználói hitelesítés egyszerű, mivel csak a megfelelő formátumban tárolja az adatokat. Az űrlapon például ellenőrizheti, hogy a megadott e-mail-cím érvényes-e, és hogy a jelszó 8 karakternél hosszabb-e.

Az űrlap érvényesítéséhez definiáljon egy érvényesítési függvényt, amely elfogadja az űrlapértékeket, és egy hibaobjektumot ad vissza.

Ha hozzáadja az érvényesítési funkciót useFormik, minden talált érvényesítési hiba elérhető lesz Formik.hibák, indexelve a bemeneti néven. Például az e-mail mezővel kapcsolatos hibaüzenetet a használatával érheti el Formik.errors.email.

Ban ben Register.js, hozza létre a érvényesít funkciót, és belefoglaljuk useFormik.

const formik = useFormik({
 kezdeti értékek: {
 email: "",
 Jelszó: "",
 },
 érvényesítés: () => {
 const errors = {};
 console.log (hibák)
 if (!formik.values.email) {
 errors.email = "Kötelező";
 } else if (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Érvénytelen e-mail cím";
 }
 if (!formik.values.password) {
 errors.password = "Kötelező";
 } else if (formik.values.password.length < 8) {
 errors.password = "8 vagy több karakterből kell állnia";
 }
 visszatérési hibák;
 },
 onSubmit: (értékek) => {
 console.log("elküldve!");
 // beküldés kezelése
 },
});

Hibakezelés hozzáadása

Ezután jelenítse meg a hibaüzeneteket, ha vannak. Használat Formik.érintett ellenőrizni, hogy a mezőt felkeresték-e. Ez megakadályozza, hogy hiba jelenjen meg olyan mezőben, amelyet a felhasználó még nem látogatott meg.

 id="e-mail"
 name="email"
 type="email"
 placeholder="Az Ön e-mailje"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nulla}
 id="jelszó"
 name="jelszó"
 type="jelszó"
 placeholder="Az Ön jelszava"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: nulla}

É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 ja könyvtár. A kezdéshez telepítse a yup-ot.

npm install yup

Importálás ja ban ben Register.js.

import * mint Yup a "yup"-ból

Ahelyett, hogy saját egyéni érvényesítési funkciót írna, a Yup segítségével ellenőrizze, hogy az e-mail és a jelszó érvényes-e.

const formik = useFormik({
 kezdeti értékek: {
 email: "",
 Jelszó: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Érvénytelen e-mail cím")
 .required("Kötelező"),
 jelszó: Yup.string()
 .min (8, "8 vagy több karakternek kell lennie")
 .required("Kötelező")
 }),
 onSubmit: (értékek) => {
 console.log("elküldve!");
// beküldés kezelése
 },
});

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

Mindent összecsomagolva

Az űrlapok minden alkalmazás szerves részét képezik, mivel lehetővé teszik a felhasználói adatok gyűjtését. A React alkalmazásban az űrlapok létrehozása fájdalmas élmény lehet, különösen akkor, ha sok adattal vagy több űrlappal van dolgod. Egy olyan eszköz, mint a Formik, egyszerű és zökkenőmentes módot kínál az űrlapértékek lekérésére és érvényesítésére.

10 React bevált gyakorlat, amelyet követned kell 2022-ben

Olvassa el a következőt

A szerzőről