نحوه ساخت فرم ها در React با استفاده از React Hook Form

فرم‌های React خود را با کمترین تلاش ساخته و تأیید کنید.

ساختن فرم ها در برنامه React می تواند پیچیده و زمان بر باشد. با کمک کتابخانه React Hook Form می توانید به راحتی فرم های با کارایی بالا را به برنامه React خود اضافه کنید.

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

نصب React Hook Form

برای شروع استفاده از React Hook Form، باید آن را با استفاده از npm یا yarn package managers نصب کنید.

برای نصب React Hook Form با استفاده از npm، دستور زیر را در ترمینال خود اجرا کنید:

npm install react-hook-form

برای نصب React Hook Form با استفاده از yarn، دستور زیر را اجرا کنید:

yarn add react-hook-form

ایجاد یک فرم با استفاده از React Hook Form

برای ایجاد فرم با استفاده از React Hook Form، باید از قلاب useForm استفاده کنید. قلاب useForm به شما امکان دسترسی به روش‌ها و ویژگی‌هایی را می‌دهد که از آنها برای ساخت و مدیریت فرم‌های خود در برنامه React خود استفاده می‌کنید.

در اینجا یک مثال نشان می دهد که چگونه از قلاب useForm استفاده کنید:

import React from 'react'
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' { ...register("firstname")} />
      <button>Submit</button>
    </form>
  )
}

export default Form;

کتابخانه React Hook Form از روش ثبت برای ثبت مقادیر ورودی شما در قلاب استفاده می کند. روش ثبت، فیلدهای ورودی یک فرم را به کتابخانه React Hook Form متصل می کند تا کتابخانه بتواند فیلدهای ورودی را ردیابی و تأیید کند.

در بلوک کد بالا، یک ورودی با نام «firstname» ثبت می‌کنید. روش handleSubmit کتابخانه React Hook Form، ارسال فرم را انجام می‌دهد.

برای رسیدگی به ارسال فرم، تابع callback onSubmit را به روش handleSubmit منتقل می‌کنید. تابع onSubmit یک شی حاوی مقادیر تمام ورودی های فرم را دریافت می کند.

اعتبار سنجی ورودی ها با روش ثبت

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

اینطوری:

import React from 'react'
import { useForm } from 'react-hook-form';

function Form() {

  const{ register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' { ...register("firstname", { required: true})} />
      <input type='password' { ...register("password", { required: true, maxLength: 10})}/>
      <button>Submit</button>
    </form>
  )
}

export default Form;

در این مثال، شما یک قانون اعتبار سنجی به فیلد ورودی “نام اول” و دو قانون اعتبار سنجی به “رمز عبور” اضافه می کنید. قانون مورد نیاز مشخص می کند که کاربر باید فیلدهای ورودی را پر کند و در صورت خالی بودن فیلدها نمی توانند فرم را ارسال کنند.

قانون maxlength حداکثر تعداد حروف الفبای مقدار ورودی را تنظیم می کند. به غیر از روش های مورد نیاز و حداکثر، می توانید قوانین اعتبار سنجی دیگری مانند حداقل، حداکثر، حداقل طول، الگو و اعتبار را اضافه کنید.

حداقل و حداکثر

قانون min حداقل مقدار را برای یک فیلد ورودی و قانون max حداکثر مقدار آن را مشخص می کند.

می توانید از قوانین min و max با ورودی های نوع عدد استفاده کنید، مانند این:

<input type='number' { ...register("age", {min: 18, max: 35}) } />

مقدار فیلد ورودی بالا باید حداقل 18 و بیشتر از 35 نباشد.

طول دقیقه

قانون minLength مشابه قانون maxLength است اما در عوض حداقل تعداد حروف الفبا را تعیین می کند:

<input type='text' { ...register("name", { minLength: 10 })}/>

در این مثال، قانون minLength مشخص می کند که مقدار ورودی باید حداقل 10 کاراکتر باشد.

الگو و اعتبارسنجی

قانون الگو یک الگوی عبارت منظم را مشخص می کند که مقدار ورودی باید مطابقت داشته باشد. قانون اعتبارسنجی به شما این امکان را می دهد که یک تابع اعتبارسنجی سفارشی برای اعتبارسنجی مقدار ورودی تعریف کنید. تابع باید یا true یا یک پیغام خطای رشته ای را برگرداند.

مثلا:

<input type='text' { ...register("firstname", {pattern: **/^[A-Za-z]+$/**}) } />
<input type='number' { ...register("test", {**validate: (value) => value <= 12** }) } />

در این مثال، ورودی “firstname” از قانون الگو استفاده می کند. الگو مستلزم آن است که مقدار ورودی فقط دارای نویسه های الفبایی (بزرگ و کوچک) باشد.

ورودی “تست” از قانون اعتبارسنجی برای تعریف یک تابع اعتبارسنجی سفارشی استفاده می کند که بررسی می کند آیا مقدار آن کمتر یا مساوی 12 است.

رسیدگی به خطاها در فرم شما

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

با این حال، اگر هر گونه خطای اعتبار سنجی رخ دهد، وعده با یک شی خطا که حاوی خطاهای اعتبارسنجی است رد می شود.

در اینجا مثالی از نحوه رسیدگی به خطاها با استفاده از تابع handleSubmit آورده شده است:

import React from 'react'
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' { ...register("firstname", { required: true})} />
      {errors.firstname && <span>Please input your Firstname</span>}

      <input type='number' { ...register("age", {min: 18, max: 35,}) } />
      {errors.age?.type === 'max' && <span> You are too old for this site</span>}
      {errors.age?.type === 'min' && <span> You are too young for this site</span>}

      <button>Submit</button>
    </form>
  )
}

export default Form;

در این بلوک کد، شی formState به خطاهای هر فیلد دسترسی پیدا می کند. شی errors خطاهای اعتبارسنجی را برای هر فیلد ورودی ذخیره می کند. شی errors به ​​صورت مشروط یک پیام خطا برای هر فیلد نامعتبر ارائه می دهد.

برای فیلد ورودی نام، اگر قانون مورد نیاز رعایت نشود، یک پیغام خطا – “Please input your Firstname” – در کنار فیلد ورودی نمایش داده می شود. اگر مقدار فیلد ورودی سن خارج از محدوده مجاز باشد، یک پیام خطا نمایش داده می شود.

اگر مقدار کمتر از 18 باشد، پیام خطا “You are too small for this site” و اگر مقدار بیشتر از 35 باشد، پیام خطا “You are too old for this site” خواهد بود.

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

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

با استفاده از hook useForm، متد ثبت و روش handleSubmit، ساخت فرم‌ها در React به فرآیندی کارآمدتر و ساده‌تر تبدیل می‌شود. شما می توانید فرم های کاربردی ایجاد کنید و به نوبه خود تجربه کاربری و کیفیت کلی برنامه های React خود را بهبود ببخشید.

منبع مقاله