کتابخانه React Hook Form برای مدیریت فرم در ری اکت ( آموزش و بررسی جامع )

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

با فِرانت اِندی همراه باشید …

قضیه چیه ؟!

اکثر اپیکیشن های تحت وب شامل فرم هایی هستن که یکسری اطلاعات رو از کاربر دریافت میکنن ( مثل اطلاعات کاربر برای ثبت نام و .. )

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

کتابخانه React Hook Form در ری اکت

React Hook Form یکی از بهترین کتابخانه های ری اکت هست که به ما اجازه میده فرم های پیچیده رو مدیریت کنیم. این کتابخانه عملکرد فوق العاده خوبی داره.

کتابخانه React Hook Form حجم خیلی پایینی داره، وابستگی کمی داره و خیلی عالی میتونه با کتابخانه های UI مثل Antd یا کتابخانه Material UI ادغام بشه.

پس اگه تو اپیکیشن ری اکتی خودمون فرم های پیچیده ای داریم و میخوایم خیلی راحت مدیریتشون کنیم، React Hook Form میتونه انتخاب فوق العاده ای برامون باشه.

چطور از کتابخانه React Hook Form استفاده کنیم ؟

تو مرحله اول به کمک دستور زیر میتونیم این کتابخونه رو نصب کنیم :

npm i --save react-hook-form

حالا خیلی ساده میتونیم این کتابخانه رو داخل کامپوننت خودمون import کنیم :

import { useForm } from &quotreact-hook-form"

تو تیکه کد بالا، ما هوک useForm رو فراخوانی کردیم. این هوک ویژگی ها و قابلیت های خیلی زیادی رو در اختیار ما میزاره. اما فعلا ما از ویژگی register و handleSubmit استفاده میکنیم.

مطابق کد زیر :

const { register, handleSubmit } = useForm();

ما باید input های خودمون رو به کمک یک متغیر register کنیم تا برای Validation و submit کردن فرم از اون متغیر استفاده کنیم.

بطور مثال برای register کردن یک input میتونیم از روش زیر استفاده کنیم :

<input

className=&quotborder-2 outline-none p-2 rounded-md&quot

placeholder=&quotName&quot

{...register(&quotname&quot)}

/>

حالا برای اینکه بتونیم به اطلاعات فرم و submit شدن فرم دسترسی داشته باشیم، میتونیم مطابق کد زیر از onSubmitmethod استفاده کنیم :

<form ={handleSubmit()}>

تموم مباحثی که راجبش صحبت کردیم ( تیکه کد های بالا ) رو میشه تو تیکه کد زیر بصورت کامل دید :

import { useState } from &quotreact"

import { useForm } from &quotreact-hook-form"

export default function ReactHookFormMini() {

  const { register, handleSubmit } = useForm();

  const [data, setData] = useState(&quot&quot);

  const  = (data) => {

    setData(data)

  }

  return (

    <div className=&quotw-full flex justify-center items-center bg-gray-900 p-8 border-r border-dashed&quot>

      <div className=&quotw-1/2 shadow-lg rounded-md bg-white p-8 flex flex-col&quot style={{height:'375px'}}>

        <h2 className=&quottext-center font-medium text-2xl mb-4&quot>

          React Hook Form Basic

        </h2>

        <form

          ={handleSubmit()}

          className=&quotflex flex-1 flex-col justify-evenly&quot

        >

          <input

            className=&quotborder-2 outline-none p-2 rounded-md&quot

            placeholder=&quotName&quot

            {...register(&quotname&quot)}

          />

          <button

            className=&quot flex justify-center p-2 rounded-md w-1/2 self-center bg-gray-900  text-white hover:bg-gray-800&quot

            type='submit'

          >

            <span>

              Submit

            </span>

          </button>

        </form>

        <div className='h-4'>

          <p> Data: {JSON.stringify(data)}</p>

        </div>

      </div>

    </div>

  );

}

خروجی کد بالا رو میشه تو تصویر زیر دید :

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

ما باید از ورود داده های ناخواسته به فرم های خودمون جلوگیری کنیم. پس تقریبا تمامی فرمهای میتونن شامل Form Validation باشن!

بطور مثال ما میتونیم تعداد کاراکتر های Input رو کنترل کنیم ( اگه کم یا زیاد بود به کاربر هشدار بدیم )

اعتبار سنجی داده ها معمولا تو سه لایه مختلف انجام میشه تا اطمینان حاصل کنیم که اطلاعات نادرست به back-end و درنهایت database نمیرسه!

1- اعتبار سنجی داده در فرانت

2- اعتبار سنجی داده در بک اند

3- اعتبار سنجی داده در دیتابیس

اعتبار سنجی فرم در ری اکت میتونه چالش برانگیز و سخت باشه! مخصوصا اگه فرم ما برزگ باشه و فیلد های زیادی داشته باشه!

کتابخانه React Hook Form در ری اکت این کار رو برامون راحت کرده 🙂 خود React Hook Form به کمک ویژگی های زیر Form Validation رو انجام میده:

• ویژگی required :
  

ویژگی required مشخص میکنه که پر کردن این فیلد ضروریه یا خیر.

• ویژگی min :
  

حداقل مقداری که میتونه این فیلد قبول کنه ( مثلا عدد 1 میتونه به عنوان حداقل مقدار تنظیم بشه، پس عدد 0 قابل قبول نیست )

• ویژگی max :
  

حداکثر مقداری که میتونه این فیلد قبول کنه ( مثلا عدد 99 میتونه به عنوان حداکثر مقدار تنظیم بشه، پس عدد 100 قابل قبول نیست )

• ویژگی minLength :
  

این ویژگی حداقل طول قابل قبول فیلد رو مشخص میکنه. مثلا برای دریافت شماره همراه کاربر میتونیم این ویژگی رو 11 تنظیم کنیم. در این صورت کاربر نمیتونه یک شماره تلفن همراه 10 رقمی وارد کنه!

• ویژگی maxLength :
  

این ویژگی حداکثر طول قابل قبول فیلد رو مشخص میکنه. مثلا برای دریافت شماره همراه کاربر میتونیم این ویژگی رو 11 تنظیم کنیم. در این صورت کاربر نمیتونه یک شماره تلفن همراه 12 رقمی وارد کنه!

• ویژگی pattern :
  

ما میتونیم regex های خودمون رو به کمک این ویژگی برای Form Validation هر فیلد تنظیم کنیم.

• ویژگی validate :
  

به کمک این ویژگی میتونیم Function های خودمون رو برای Form Validation اعمال کنیم.

تو تیکه کد زیر یک input داریم که Form Validation براش لحاظ کردیم ( به کمک ویژگی های بالا ) :

<input

className=&quotborder-2 outline-none p-2 rounded-md&quot

placeholder=&quotPhone Number&quot

{...register(&quotphoneNumber&quot, {

   minLength: 1,

   maxLength: 10,

})}

/>

اما این کافی نیست! چون اگه کاربر شرایط فیلد رو رعایت نکنه، هیچ اروری دریافت نمیکنه!

ما باید به کاربران خودمون یک متن ارور نمایش بدیم تا کاربر بدونه مشکل کجاست !! تو تیکه کد زیر یک Message به کاربر نمایش میدیم تا بدونه مشکلش کجاست :

<input

className=&quotborder-2 outline-none p-2 rounded-md&quot

placeholder=&quotEmail&quot

{...register(&quotemail&quot, {

pattern: {

  value: /^.*@hygraph.com$/,

  message: 'Email must end with FrontEndi.com'

}

})}

/>

ما حتی میتونیم ارور های دریافتی رو تو یه قالب دیگه به کاربر نمایش بدیم ( مثلا داخل تگ P ).

میتونیم ارور دریافتی رو که خودش یک Object هست از هوک useForm بگیریم و هر بلایی میخوایم سرش بیاریم :

const { formState: { errors } } = useForm();

<span className=&quottext-sm text-red-700&quot>

   {errors?.email?.message}

</span>

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

ادغام با کامپوننت های دیگر ( مثل Antd یا Material UI )

ما میتونیم React Hook Form رو با کامپوننت های دیگه، مثل کامپوننت های Antd ادغام کنیم.

تو تیکه کد زیر ما کتابخانه React Hook Form رو با کامپوننت های کتابخانه Antd ادغام کردیم :

import React, { useState } from 'react';

import { Controller, useForm } from &quotreact-hook-form"

import { Input, Checkbox, Slider } from &quotantd"

export default function RFHWithAntd() {

  const { control, handleSubmit } = useForm();

  const [data, setData] = useState({});

  const  = (data) => {

    setData(data)

  }

  return (

    <div className=&quotw-full flex justify-center items-center bg-gray-900 p-8 border-r border-dashed&quot>

      <div className=&quotw-1/2 shadow-lg rounded-md bg-white p-8 flex flex-col&quot style={{ height: '375px' }}>

      <h2 className=&quottext-center font-medium text-2xl mb-4&quot>

          React Hook Form With AntD

        </h2>

        <form

          ={handleSubmit()}

          className=&quotflex flex-1 flex-col justify-evenly&quot

        >

          <Controller

            control={control}

            name=&quotname&quot

            render={({ field }) => (

            <Input

             {...field}

             placeholder=&quotName&quot

            />

            )}

          />

          <div className=&quotflex&quot>

            <label>Is Developer?</label>

            <Controller

              control={control}

              name=&quotisDeveloper&quot

              render={({ field: { value,  } }) => (

                <Checkbox

                  className=&quotml-4&quot

                  checked={value}

                  ={(e) => {

                    (e.target.checked);

                  }}

                />

              )}

            /></div>

          <section>

            <label>Experience In Years</label>

            <Controller

              control={control}

              name=&quotexperience&quot

              render={({ field }) => <Slider {...field} />}

            />

          </section>

          <button

            className=&quot flex justify-center p-2 rounded-md w-1/2

            self-center bg-gray-900  text-white hover:bg-gray-800&quot

            type='submit'

          >

            <span>

              Submit

            </span>

          </button>

        </form>

        <div className='h-4'>

          <p> Data: {JSON.stringify(data)}</p>

        </div>

      </div>

    </div>

  )

};

تو تصویر زیر میشه خروجی تیکه کد بالا رو دید :

چند مثال از کتابخانه React Hook Form در ری اکت

لطفا برای مطالعه ادامه مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :

کتابخانه React Hook Form در ری اکت