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

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

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

React Hook Form چیست؟

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

این بسته حجمی کوچک دارد (فقط 8.6 کیلوبایت) و هیچ وابستگی ندارد. علاوه بر این، API آن بسیار خلاقانه ساخته شده است و تجربه منحصر به فردی را برای توسعه دهنده فراهم می کند. React Form Hook از استاندارد HTML برای اعتبارسنجی فرم پیروی می کند و از یک API اعتبارسنجی مبتنی بر محدودیت استفاده می کند.

یکی دیگر از ویژگی های عالی React Hook Form این است که به طور یکپارچه به کتابخانه های UI پیوند می دهد. این به این دلیل است که اکثر کتابخانه ها از ویژگی ref پشتیبانی می کنند.

برای نصب React Hook Form از دستور زیر استفاده می شود:

نحوه استفاده از هوک در React

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

ابتدا قلاب useForm را از بسته react-hook-form وارد کنید:

;"import { useForm } from "react-hook-form

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

;()const { register, handleSubmit } = useForm

قلاب useForm یک شی با تعدادی ویژگی را به شما برمی گرداند. در حال حاضر فقط به مشخصات register و handleSubmit نیاز دارید.

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

برای ثبت ورودی، روش registrıster را در داخل فیلد ورودی پاس می کنیم. مثل این:

</ input type="text" name="firstName" {...register('firstName')}>

این نحو عملگر بیضی یک کاربرد جدید در این کتابخانه است که به TypeScript اجازه می دهد تا نوع اسکریپت را بررسی کند.

در نسخه‌های قدیمی‌تر از v7، روش register برای ویژگی ref اعمال می‌شود. مثل این:

< /input type="text" name="firstName" ref={register}>

به یاد داشته باشید که جزء ورودی باید یک ویژگی نام داشته باشد و مقدار آن باید منحصر به فرد باشد.

روش handleSubmıt همانطور که از نامش پیداست وظیفه رسیدگی به داده های ارسالی را بر عهده دارد. این متد باید به عنوان یک مقدار به ویژگی onSubmit کامپوننت فرم اضافه شود.

متد handleSubmıt می تواند دو تابع را به عنوان آرگومان های خود انتخاب کند. اولین تابعی که به‌عنوان آرگومان ارسال می‌شود، در صورت موفقیت آمیز بودن اعتبارسنجی، همراه با مقادیر فیلد ثبت‌شده فراخوانی می‌شود. دومی زمانی فراخوانی می شود که اعتبارسنجی ناموفق باشد:

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

;const onErrors = errors => console.error(errors)

<form onSubmit={handleSubmit(onFormSubmit, onErrors)}>

 {/* ... */}

</form>

اکنون که ایده روشنی از کاربرد اصلی قلاب useForm دارید، بیایید به یک مثال واقعی تر نگاه کنیم:

;"import React from "react

;"import { useForm } from "react-hook-form

} <= () = const RegisterForm

          () const { register, handleSubmit } = useForm

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

   ) return  
    <form onSubmit={handleSubmit(handleRegistration)}>           

      <div>              

        <label>Name</label>                 

        </input name="name" {...register('name')} >                 

      </div>              

      <div>              

        <label>Email</label>                  

        </input type="email" name="email" {...register('email')} >                  

      <div/>              

      <div>              

        <label>Password</label>                  

        </input type="password" name="password" {...register('password')} >                  

      <div/>              

      <button>Submit</button>               

    <form/>              
     ;(           
;{        
;export default RegisterForm

همانطور که می بینید، هیچ جزء ردیابی ورودی دیگری اضافه نشده است. قلاب useForm کد کامپوننت شما را پاک‌تر می‌کند و در نتیجه نگهداری و به‌روزرسانی کد آسان‌تر می‌شود و از آنجایی که فرم شما کنترل نمی‌شود، نیازی به استفاده از ویژگی‌هایی مانند onChange و مقدار برای هر یک از ورودی‌های خود نخواهید داشت.

در قسمت بعدی نحوه انجام عملیات اعتبار سنجی در فرمی که ایجاد کردیم را بررسی خواهیم کرد.

اعتبار سنجی فرم از طریق React Hook Form

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

• اجباری: نشان می دهد که آیا فیلد مورد نظر مورد نیاز است یا خیر. اگر این ویژگی را روی true تنظیم کنید، فیلد مربوطه نمی تواند خالی باشد.
• Minlength و حداکثر طول : حداقل و حداکثر طول کاراکتر را برای مقدار یک رشته رشته مشخص کنید.
• دقیقه و حداکثر : حداقل و حداکثر مقدار عددی را برای یک فیلد عددی مشخص کنید.
• تایپ کنید : نوع فیلد ورودی را مشخص می کند. این فیلد می تواند متن، ایمیل، شماره یا سایر انواع ورودی استاندارد HTML باشد.
• مدل : الگوی مقدار ورودی را با استفاده از یک عبارت ساده مشخص می کند.

اگر قصد دارید یک فیلد را اجباری کنید، کد شما به شکل زیر است:

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

حال اگر بخواهید این فیلد را با مقدار خالی ارسال کنید، شی خطای شما مانند کد زیر خواهد بود:

}
} :name  
  
 , "type: "required     
    
,""  :message     
</ "ref: <input name="name" type="text      

{     
{

در اینجا، ویژگی type به نوع اعتبار سنجی ناموفق اشاره دارد و ویژگی ref حاوی یک عنصر DOM بومی است.

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

...// 

<form onSubmit={handleSubmit(handleRegistration, handleError)}>

  <div>   

      <label>Name</label>      

      </input name="name" {...register('name', { required: "Name is required" } )}>      

  <div/>   

</form>

سپس می توانید با استفاده از قلاب useForm به شی خطا دسترسی پیدا کنید:

;()const { register, handleSubmit, formState: { errors } } = useForm

برای نشان دادن خطاها به کاربر خود می توانید موارد زیر را انجام دهید:

} <= () = const RegisterForx
  ;()const { register, handleSubmit, formState: { errors } } = useForm
 ; const handleRegistration = (data) => console.log(data)

)  return  
    <form onSubmit={handleSubmit(handleRegistration)}>       
      <div>          
        <label>Name</label>            
        <input type="text" name="name" {...register('name')} />            
        {errors?.name && errors.name.message}            
      </div>          
      {/* more input fields... */}          
      <button>Submit</button>          
    </form>       
  ;(  
;{

کد کامل را در زیر مشاهده خواهید کرد:

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

} <=  () = const RegisterForm
;()const { register, handleSubmit, formState: { errors } } = useForm
  ;const handleRegistration = (data) => console.log(data)
;{}<= const handleError = (errors)

}  =const registerOptions
     ,name: { required: "Name is required" }   
    ,email: { required: "Email is required" }   
     } :password   
       ,"required: "Password is required      
       }:minLength      
        ,value: 8         
         "message: "Password must have at least 8 characters          
      {       
    {    
 ;{

 ) return  
    <form onSubmit={handleSubmit(handleRegistration, handleError)}>
      <div>   
        <label>Name</label>      
        <input name="name" type="text" {...register('name', registerOptions.name) }/>      
        <small className="text-danger">      
          {errors?.name && errors.name.message}         
        </small>      
      </div>   
      <div>   
        <label>Email</label>      
        <input      
          type="email"      
          name="email"      
          {register('email', registerOptions.email)...}      
        />      
        <small className="text-danger">      
          {errors?.email && errors.email.message}         
        </small>      
      </div>   
      <div>   
        <label>Password</label>      
        <input      
          type="password"         
          name="password"         
          {register('password', registerOptions.password)...}         
        />      
        <small className="text-danger">      
          {errors?.password && errors.password.message}         
        </small>      
      </div>   
      <button>Submit</button>   
    </form>
  ;(
;{
;export default RegisterForm

اگر می‌خواهید فیلد را در طول رویداد onChange یا onBlur تأیید کنید، می‌توانید ویژگی mode را به قلاب useForm منتقل کنید.

})const { register, handleSubmit, errors } = useForm
  
  "mode: "onBlur

;({

نتیجه

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

این! راهنمای ساخت فرم ما کامل است. برحذر بودن. تا مقاله بعدی با ما همراه باشید.

راهنمای کامل فرم واکنش هوک با مثال اولین بار در دانش و فناوری صبح پدیدار شد. به نظر می رسد.