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

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

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

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

React Hook Form چیست؟

رویکرد اتخاذ شده توسط React Hook Forms با سایر کتابخانه های اکوسیستم React متفاوت است. React Hooks Forms به جای تکیه بر حالت برای کنترل ورودی، استفاده از ورودی های کنترل نشده و استفاده از ref ها را در نظر می گیرد. این روش فرم ها را کارآمدتر می کند و نیاز به ارسال مجدد کمتری دارد.

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

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

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

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

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

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

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

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

;()const { register, handleSubmit } = useForm

قلاب UseForm به شما یک شی با چندین ویژگی می دهد. در حال حاضر، تنها چیزی که نیاز دارید ویژگی های Register و HandleSubmit است.

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

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

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

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

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

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

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

همانطور که از نام آن پیداست، متد handleSubmit وظیفه رسیدگی به داده های ارسالی را بر عهده دارد. این روش باید به عنوان مقدار ویژگی onsubmit مولفه فرم اضافه شود.

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

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

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

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

 {/* ... */}

</form>

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

;"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 و مقدار برای هر یک از ورودی های خود استفاده کنید. رخ دادن.

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

اعتبار سنجی فرم توسط فرم قلاب واکنش

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

• ضروری: اجباری بودن فیلد مورد نظر را مشخص می کند. اگر این ویژگی را روی true تنظیم کنید، فیلد مربوطه نمی تواند خالی باشد.
• Minlength و بیشترین طول : حداقل و حداکثر طول کاراکترها را برای مقدار فیلد رشته مشخص کنید.
• دقایق و حداکثر : حداقل و حداکثر مقادیر عددی را برای قسمت Number مشخص کنید.
• تایپ کنید : نوع فیلد ورودی را مشخص می کند. این فیلد می تواند متن، ایمیل، شماره یا هر نوع ورودی استاندارد دیگری در 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 Forms یک افزونه عالی برای اکوسیستم منبع باز React است. این کتابخانه ایجاد و به روز رسانی فرم ها را برای توسعه دهندگان بسیار آسان می کند. بهترین بخش این کتابخانه تمرکز آن بر تجربه توسعه دهنده است و کار با آن بسیار انعطاف پذیر است. علاوه بر این، این کتابخانه به خوبی با کتابخانه های مدیریت دولتی سازگار است و در React Native عالی کار می کند.

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