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

کتابخانه Formik در ری اکت با ویژگی ها و قابلیت هایی که داره به ما اجازه میده در کمترین زمان ممکن فرم های بهینه و پیشرفته با قابلیت اعتبار سنجی بسازیم 🙂

ساختن فرم های پیچیده در ری اکت و اضافه کردن قابلیت های پیشرفته مثل اعتبار سنجی به اون، میتونه زمانبر و خسته کننده باشه! کتابخانه Formik در React برای حل این چالش به ما کمک میکنه ..

با فِرانت اِندی همراه باشید تا این کتابخانه قدرتمند و محبوب ری اکتی رو بررسی کنیم 🙂

کتابخانه Formik چیست ؟

Formik یک کتابخانه ی متن باز و محبوبه که به ما امکان ساخت و مدیریت فرم های پیشرفته در ری اکت رو میده.

کتابخانه Formik چندین کامپوننت و تابع جذاب در اختیار ما گذاشته که باعث شده کار با فرم ها در ری اکت جذاب تر از همیشه باشه 🙂

حالا شاید این سوال برامون پیش بیاد که اصلا چه نیازی به کتابخانه هایی مثل کتابخانه React Hook Form یا همین Formik برای ایجاد و مدیریت فرم ها داریم ؟؟

ایجاد و مدیریت دستی فرم ها ( بدون کتابخانه )

زمانیکه از روش سنتی برای ایجاد و مدیریت فرم ها در ری اکت استفاده میکنیم، باید به ازای هر فیلد ورودی ( input ) یک هوک useState در ری اکت بسازیم جهت ذخیره اون مقدار ورودی!

یا حتی برای هر فیلد ورودی یک event Listener بسازیم!

نکته اینجاست که علاوه بر کثیف و شلوغ کردن کامپوننت خودمون، با ایجاد re-render های اضافی توسط فرم، باعث کاهش بهینگی اپیکیشن خودمون میشیم!

تو کامپوننت زیر، از روش سنتی برای ساخت و مدیریت فرم استفاده کردیم:

// Infuriating traditional react form management method

import { useState } from &quotreact"

function InputForm() {

  const [input1, setInput1] = useState(&quot&quot);

  const [input2, setInput2] = useState(&quot&quot);

  const handleInputChange = (event) => {

    const { name, value } = event.target;

    if (name === &quotinput1&quot) {

      setInput1(value);

    } else if (name === &quotinput2&quot) {

      setInput2(value);

    }

  };

  const handleSubmit = (event) => {

   // . . .

  };

  return (

    <form ={handleSubmit}>

      <input name=&quotinput1&quot value={input1} ={handleInputChange} />

      <input name=&quotinput2&quot value={input2} ={handleInputChange} />

      <button type=&quotsubmit&quot>تایید و ارسال</button>

    </form>

  );

}

export default InputForm;

کامپوننت بالا خیلی کثیف و شلوغ شده و اصلا بهینه نیست ( کامپوننت Performance ضعیفی داره ) !

کتابخانه Formik در ریکت در پشت صحنه تمامی موارد بالارو مدیریت میکنه و باعث میشه کامپوننت ما Performance خوبی داشته باشه. تو تیکه کد زیر، همون کامپوننت بالارو به کمک Formik نوشتیم:

<Formik

  ={(formData) => {

    console.log(formData);

  }}

>

  {({ isSubmitting }) => (

    <Form>

      <Field type=&quottext&quot name=&quotfullname&quot placeholder=&quotEnter fullname&quot />

      <Field type=&quotemail&quot name=&quotemail&quot placeholder=&quotEnter address&quot />

      <button type=&quotsubmit&quot>تایید و ارسال</button>

    </Form>

  )}

</Formik>;

میبینیم که کتابخانه Formik چقدر کار رو برای ما ساده تر کرده!

کتابخانه Formik در React علاوه بر ساخت و مدیریت فرم، به ما اجازه داده که Form Validation ( اعتبار سنجی فرم ) رو پیاده سازی کنیم. همچنین به کمک Formik تونستیم وضعیت ارسال داده های فرم به سرور و خطاهای اون رو مدیریت کنیم.

بریم ببینیم چطور میشه Formik در ری اکت رو نصب و ازش استفاده کرد ..

آموزش نصب Formik در ری اکت

برای نصب کتابخانه Formik در ریکت، ابتدا یک پروژه جدید ری اکتی ایجاد میکنیم :

npx create-react-app my-app

cd my-app

npm start

پس از ایجاد پروژه ری اکتی و Start کردن پروژه، باید کتابخانه Formik رو نصب کنیم :

npm install formik --save

حالا که کتابخانه Formik رو نصب کردیم، میتونیم از ویژگی ها و قابلیت های این کتابخانه ارزشمند استفاده کنیم 🙂

بصورت زیر میتونیم کامپوننت ها و ویژگی های اصلی کتابخانه Formik رو وارد کامپوننت خودمون کنیم:

import { Formik, Form, Field, ErrorMessage } from 'formik';

حالا شاید این سوال برامون پیش بیاد که موارد بالا چی هستن که فراخوانیشون کردیم!

• کامپوننت Form :
  

کامپوننت Form شامل تمام ویژگی های مورد نیاز ما در زمینه ایجاد فرم میشه. کامپوننت Form به ما در زمینه مدیریت فرم، اعتبار سنجی فرم و ارسال فرم کمک میکنه.

• کامپوننت Field :
  

کامپوننت Field به ما در زمینه ایجاد فیلد های فرم کمک میکنه. از کامپوننت Field میتونیم برای مشخص کردن فیلد ورودی در فرم استفده کنیم.

کامپوننت Field میتونه مقدار هر فیلد و اعتبارسنجی مقدارش رو مدیریت کنه.

• کامپوننت ErrorMessage :
  

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

خود کامپوننت Formik رو هم در ادامه بررسی میکنیم …

چطور یک فرم به کمک Formik بسازیم ؟

ما میتونیم یک فرم بسازیم و تمامی اجزای اون فرم رو داخل کامپوننت Formik قرار بدیم.

تو تیکه کد زیر، ما یک فرم به کمک کتابخانه Formik در ری اکت ساختیم :

import React from &quotreact"

import { Formik, Form, Field, ErrorMessage } from &quotformik"

function App() {

 return (

   <div className=&quotApp&quot>

     <center>

       <h1>Register a new account</h1>

       <Formik>

         {({ isSubmitting }) => (

           <Form>

             <Field

               type=&quottext&quot

               name=&quotfullname&quot

               placeholder=&quotEnter your fullname&quot

             />

             <ErrorMessage name=&quotfullname&quot component=&quotdiv&quot />

             <Field

               type=&quotemail&quot

               name=&quotemail&quot

               placeholder=&quotEnter email address&quot

             />

             <ErrorMessage name=&quotemail&quot component=&quotdiv&quot />

             <Field type=&quotpassword&quot name=&quotpassword&quot />

             <ErrorMessage name=&quotpassword&quot component=&quotdiv&quot />

             <button type=&quotsubmit&quot disabled={isSubmitting}>

               Submit

             </button>

           </Form>

         )}

       </Formik>

     </center>

   </div>

 );

}

export default App;

تو تیکه کد بالا، ما تمام اجزای فرم ( فیلد های ورودی ) ، اعتبار سنجی و تابع ارسال رو داخل کامپوننت Formik قرار دادیم. کامپوننت Field ، ورودی هر فیلد فرم رو مشخص میکنه مثل نام، ایمیل، رمز و ..

همچنین کامپوننت ErrorMessage خطاهای اعتبارسنجی فرم رو برای هر فیلد به کاربر نشون میده.

اگه به خط 28 نگاه کنیم، میبینیم که از مقدار disabled={isSubmitting} استفاده کردیم. این یعنی زمانیکه فرم ما درحال ارسال اطلاعات به سرور هست، دکمه ارسال غیرفعال بشه.

حالا ما باید مقدار اولیه فیلد های فرم رو مشخص کنیم. تو تیکه کد زیر، مقدار اولیه فیلد های فرم رو مشخص کردیم:

<Formik initialValues={{ fullname: &quot&quot, email: &quot&quot, password: &quot&quot }}>

اعتبار سنجی فرم با کتابخانه Formik ( همون Form Validation )

لطفا برای مطالعه ادامه این مقاله در وبسایت فِرانت اِندی + مثالها وکتابخانه Formik در ری اکت با ویژگی ها و قابلیت هایی که داره به ما اجازه میده در کمترین زمان ممکن فرم های بهینه و پیشرفته با قابلیت اعتبار سنجی بسازیم 🙂 تیکه کد های بیشتر روی لینک زیر کلیک کنید :

کتابخانه Formik در ری اکت