نحوه استفاده از Formik برای ایجاد فرم در React

Formik ساخت و کار با فرم های React را بسیار ساده تر می کند. دریابید که چگونه!

Formik یک کتابخانه مدیریت فرم است که کامپوننت ها و قلاب هایی را برای تسهیل فرآیند ایجاد فرم های React فراهم می کند. Formik از حالت های فرم، اعتبارسنجی و کنترل کننده های خطا برای شما مراقبت می کند که جمع آوری و ذخیره داده های کاربر را آسان می کند.

در این آموزش یاد می گیرید که چگونه می توانید با استفاده از Formik یک فرم ثبت نام در React ایجاد کنید. برای دنبال کردن، باید راحت با قلاب های React کار کنید.

یک React App ایجاد کنید

از create-react-app برای ایجاد یک پروژه React جدید استفاده کنید:

npx create-react-app formik-form

اکنون به پوشه formik-form/src رفته و همه فایل ها به جز App.js را حذف کنید.

سپس یک فایل جدید ایجاد کنید و نام آن را Register.js بگذارید. این جایی است که فرم خود را اضافه خواهید کرد. به یاد داشته باشید که آن را در App.js وارد کنید.

یک React Form ایجاد کنید

شما می توانید فرم های React را با استفاده از کامپوننت های کنترل شده یا کامپوننت های کنترل نشده ایجاد کنید. یک کامپوننت کنترل شده کامپوننتی است که داده های فرم آن توسط خود React مدیریت می شود. یک مؤلفه کنترل نشده، مؤلفه ای است که داده های فرم آن توسط DOM مدیریت می شود.

اسناد رسمی React استفاده از اجزای کنترل شده را توصیه می کنند. آنها به شما اجازه می دهند اطلاعات فرم را در حالت محلی پیگیری کنید و بنابراین کنترل کامل فرم را در اختیار دارید.

در زیر نمونه ای از فرم ایجاد شده با استفاده از یک جزء کنترل شده است.

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 (
    <form className="register-form" onSubmit={handleSubmit}>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="Your Email"
        value={email}
        onChange={handleEmail}
      />
      <input
        id="password"
        name="password"
        type="password"
        placeholder="Your password"
        value={password}
        onChange={handlePassword}
      />
      <input type="submit" value="Submit" />
    </form>
  );
};
export default Register;

در کد بالا، حالت را مقداردهی اولیه می کنید و برای هر فیلد ورودی یک تابع handler ایجاد می کنید. در حالی که این کار می کند، کد شما به راحتی می تواند تکراری و به هم ریخته شود، به خصوص با بسیاری از فیلدهای ورودی. افزودن اعتبارسنجی و مدیریت پیام خطا چالش دیگری است.

هدف فورمیک کاهش این مشکلات است. رسیدگی به وضعیت فرم، اعتبارسنجی و ارسال داده های فرم را آسان می کند.

Formik را به React اضافه کنید

قبل از استفاده از فرمیک، آن را با استفاده از npm به پروژه خود اضافه کنید.

npm install formik

برای ادغام Formik، از قلاب useFormik استفاده می کنید. در Register.js، useFormik را در بالای فایل وارد کنید:

import { useFormik } from "formik"

اولین قدم این است که مقادیر فرم را مقداردهی کنید. در این صورت ایمیل و رمز عبور را مقداردهی اولیه می کنید.

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

شما همچنین در حال اضافه کردن تابع onSubmit هستید که مقادیر فرم را دریافت می کند و ارسال فرم را مدیریت می کند. برای فرم ثبت نامی مانند این، این می تواند به معنای ایجاد یک کاربر جدید در پایگاه داده باشد.

گام بعدی استفاده از شی فرمیک برای وارد کردن و خارج کردن مقادیر فرم است.

<form className="register-form" onSubmit={formik.handleSubmit}>
    <input
    id="email"
    name="email"
    type="email"
    placeholder="Your Email"
    value={formik.values.email}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    />
    <input
    id="password"
    name="password"
    type="password"
    placeholder="Your password"
    value={formik.values.password}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    />
    <input type="submit" value="Submit" />
</form>

در کد بالا شما عبارت هستید از:

• دادن یک مقدار شناسه و نام به فیلدهای ورودی برابر با مقدار مورد استفاده در هنگام شروع اولیه در قلاب useFormik.
• دسترسی به مقدار یک فیلد، استفاده از نام آن برای بازیابی آن از formik.values.
• اتصال formik.handleChange به رویداد onChange برای نمایش مقادیر ورودی به عنوان کاربر.
• استفاده از formik.handleBlur برای پیگیری فیلدهای بازدید شده.
• اتصال formik.handleSubmit به رویداد onSubmit برای فعال کردن تابع onSubmit که به قلاب useFormik اضافه کرده‌اید.

اعتبار سنجی فرم را فعال کنید

هنگام ایجاد یک فرم، اعتبارسنجی ورودی کاربر بسیار مهم است زیرا احراز هویت کاربر را آسان می کند زیرا شما فقط داده ها را در قالب صحیح ذخیره می کنید. به عنوان مثال، در فرم خود، می توانید بررسی کنید که آیا ایمیل داده شده معتبر است و آیا رمز عبور بیش از 8 کاراکتر دارد یا خیر.

برای اعتبار سنجی فرم، یک تابع اعتبار سنجی تعریف کنید که مقادیر فرم را می پذیرد و یک شی خطا را برمی گرداند.

اگر تابع اعتبار سنجی را به useFormik اضافه کنید، هر خطای اعتبارسنجی یافت شده در Formik.errors در دسترس خواهد بود که در نام ورودی فهرست شده است. برای مثال، می‌توانید با استفاده از Formik.errors.email به خطای فیلد ایمیل دسترسی پیدا کنید.

در Register.js، تابع اعتبارسنجی را ایجاد کنید و آن را در 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
    },
});

مدیریت خطا را اضافه کنید

در مرحله بعد، پیام های خطا را در صورت وجود نمایش دهید. از Formik.touched برای بررسی اینکه آیا فیلد بازدید شده است یا خیر استفاده کنید. این از نشان دادن خطا برای فیلدی که کاربر هنوز بازدید نکرده است جلوگیری می کند.

<form className="register-form">
    <input
    id="email"
    name="email"
    type="email"
    placeholder="Your Email"
    value={formik.values.email}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    />
    {formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}
    <input
    id="password"
    name="password"
    type="password"
    placeholder="Your password"
    value={formik.values.password}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    />
    {formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div> : null}
    <input type="submit" value="Submit" />
</form>

اعتبارسنجی داده ها با استفاده از بله

Formik راه آسان تری برای اعتبارسنجی فرم ها با استفاده از کتابخانه Yup ارائه می دهد. برای شروع yup را نصب کنید.

npm install yup

yup را در Register.js وارد کنید.

import * as Yup from "yup"

به جای نوشتن تابع اعتبارسنجی سفارشی خود، از Yup برای بررسی معتبر بودن ایمیل و رمز عبور استفاده کنید.

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

و بس! شما یک فرم ثبت نام ساده با استفاده از Formik و Yup ایجاد کرده اید.

بسته بندی همه چیز تا

فرم ها بخشی جدایی ناپذیر از هر برنامه کاربردی هستند زیرا به شما امکان می دهند اطلاعات کاربر را جمع آوری کنید. در React، ایجاد فرم‌ها می‌تواند تجربه‌ای دردناک باشد، به خصوص اگر با داده‌های زیادی یا چندین فرم سر و کار دارید. ابزاری مانند Formik یک راه آسان و بدون درز برای بازیابی و اعتبارسنجی مقادیر فرم ارائه می دهد.

منبع مقاله