راهنمای جامع React Hook Form همراه با مثال

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

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

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

React Hook Form چیست؟

شیو‌ه‌ای که React Hook Form دنبال می‌کند، با کتابخانه‌های دیگر موجود در اکوسیستم React متفاوت است. React Hook Form، به جای وابستگی به Stateها جهت کنترل ورودی، استفاده از ورودی‌های کنترل نشده و استفاده از ref را مد نظر قرار داده است. این شیوه، باعث می‌شود فرم‌ها کارایی بیشتری داشته باشند و تعداد بازسازی مجدد (re-render) کمتری نیاز داشته باشند.

سایز این پکیج، کوچک است (فقط 8.6 کیلوبایت) و فاقد هر گونه وابستگی (Dependency) است. ضمن این که API آن بسیار خلاقانه ساخته شده و تجربه بی‌نظیری را برای توسعه‌دهنده فراهم می‌کند. React Hook Form از استاندارد 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 نیاز دارید.

متد register، کمک می‌کند که یک فیلد ورودی را به داخل React Hook Form ثبت کنید تا بتوانید آن را اعتبارسنجی کنید و از مقدار داخل آن برای ردیابی تغییرات استفاده کنید.

برای ثبت ورودی، متد regıster را داخل فیلد ورودی، عبور می‌دهیم. به این شکل:

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

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

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

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

یادتان باشد که کامپوننت ورودی input باید یک خصیصه name داشته باشد و مقدار آن باید منحصر به فرد باشد.

متد handleSubmıt، همان‌طور که از نام آن پیداست، وظیفه مدیریت تحویل داده (submit) را بر عهده دارد. این متد باید به عنوان مقدار به خصیصه onSubmit کامپوننت form اضافه شود.

متد 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

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

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

اعتبارسنجی فرم‌ها توسط React Hook Form

برای این که امکان اعتبارسنجی یک فیلد را فراهم کنید، می‌توانید پارامتر اعتبارسنجی (valıdatıon) را به متد ثبت (register) خود انتقال دهید. پارامترهای اعتبارسنجی، شبیه استاندارد اعتبارسنجی فرم‌های HTML است. این پارامترها شامل پراپرتی‌های زیر هستند:

• required : مشخص می‌کند که فیلد موردنظر، اجباریست یا خیر. اگر این پراپرتی را روی true تنظیم کنید، فیلد مربوطه نمی‌تواند خالی باشد.
• minlength و maxlength : حداقل و حداکثر طول کاراکترهای مقدار یک فیلد string را مشخص می‌کنند.
• min و max : حداقل و حداکثر مقدار عددی را برای یک فیلد number مشخص می‌کنند.
• type : نوع فیلد input را مشخص می‌کند. این فیلد می‌تواند از نوع text، emaıl، number یا دیگر انواع استاندارد input در HTML باشد.
• pattern : الگوی مقدار ورودی را با استفاده از یک جمله ساده، مشخص می‌کند.

اگر قصد دارید فیلدی را به عنوان فیلد اجباری (required) درنظر بگیرید، کد شما این گونه خواهد بود:

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

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

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

{     
{

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

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

...// 

<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 یک افزونه عالی محسوب می‌شود. این کتابخانه باعث شده، ساخت و به روزرسانی فرم‌ها برای توسعه‌دهندگان، به امری بسیار ساده‌تر بدل شود. بهترین بخش این کتابخانه، تمرکز آن روی تجربه توسعه‌دهنده است و کار با آن از انعطاف بالایی برخوردار است. همچنین، این کتابخانه، به خوبی با کتابخانه‌های مدیریت state سازگار است و در React Natıve عالی کار می‌کند.

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