SEO

Hướng dẫn Biểu mẫu React Hook toàn diện với các ví dụ

Biểu mẫu là một trong những phần quan trọng nhất của trang web và ứng dụng cho phép người dùng tương tác. Xác thực dữ liệu người dùng thông qua biểu mẫu là một trong những trách nhiệm quan trọng nhất của nhà phát triển.

React Hook Form là thư viện giúp validate form trong React. Một thư viện tối thiểu, không có bất kỳ phụ thuộc nào, rất cụ thể và hiệu quả trong cách sử dụng, đồng thời cho phép nhà phát triển đạt được mục tiêu mong muốn với mã tối thiểu.

Trong bài viết này, chúng ta sẽ sử dụng thư viện Biểu mẫu React Hook và xây dựng một biểu mẫu tuyệt vời mà không cần các thuộc tính kết xuất phức tạp hoặc các thành phần cấp cao hơn. Bạn có thể yên tâm đến các phần khác nhau của bài viết này và kiểm tra từng phần riêng biệt.

Biểu mẫu React Hook là gì?

Cách tiếp cận của React Hook Form khác với các thư viện khác trong hệ sinh thái React. Thay vì phụ thuộc vào các Bang để kiểm soát đầu vào, React Hook Form xem xét việc sử dụng các đầu vào không được kiểm soát và việc sử dụng ref. Phương pháp này làm cho các biểu mẫu hiệu quả hơn và yêu cầu ít kết xuất lại hơn.

Kích thước của gói này nhỏ (chỉ 8,6 KB) và nó không có bất kỳ phụ thuộc nào. Ngoài ra, API của nó được tạo rất sáng tạo và cung cấp trải nghiệm độc đáo cho nhà phát triển. React Form Hook tuân theo tiêu chuẩn HTML để xác thực biểu mẫu và sử dụng API xác thực dựa trên ràng buộc.

Một tính năng tuyệt vời khác của React Hook Form là nó liên kết liền mạch với các thư viện UI. Điều này là do hầu hết các thư viện đều hỗ trợ thuộc tính ref.

Để cài đặt React Hook Form, lệnh sau được sử dụng:

npm cài đặt Reac-hook-form

Cách sử dụng hook trong React

Trong phần này, bạn sẽ tìm hiểu những kiến ​​thức cơ bản về cách sử dụng hook useForm bằng cách tạo một biểu mẫu đăng ký rất đơn giản.

Trước hết, nhập useForm hook từ gói Reac-hook-form:

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

Tiếp theo, bên trong thành phần của bạn, sử dụng hook này như sau:

;()const { register, handleSubmit } = useForm

Móc useForm trả về cho bạn một đối tượng có một số thuộc tính. Hiện tại, bạn chỉ cần các thuộc tính register và handleSubmit.

Đọc thêm  Tổ hợp Nền tảng Công nghệ và Tri thức Bamdat tròn 4 tuổi

Phương thức register giúp đăng ký một trường đầu vào vào Biểu mẫu React Hook để bạn có thể xác thực nó và sử dụng giá trị bên trong để theo dõi các thay đổi.

Để đăng ký đầu vào, chúng tôi chuyển phương thức đăng ký bên trong trường đầu vào. như thế này:

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

Cú pháp toán tử ba dấu chấm này là một cách sử dụng mới trong thư viện này, cho phép TypeScript kiểm tra loại tập lệnh.

Trong các phiên bản cũ hơn v7, phương thức đăng ký được áp dụng cho thuộc tính ref. như thế này:

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

Hãy nhớ rằng thành phần đầu vào phải có thuộc tính tên và giá trị của nó phải là duy nhất.

Phương thức handleSubmıt, như tên gọi của nó, chịu trách nhiệm quản lý dữ liệu đã gửi. Phương thức này phải được thêm dưới dạng giá trị cho thuộc tính onSubmit của thành phần biểu mẫu.

Phương thức handleSubmıt có thể chấp nhận hai hàm làm đối số của nó. Hàm đầu tiên được truyền dưới dạng đối số được gọi khi xác thực thành công, cùng với các giá trị của trường đã đăng ký. Cái thứ hai được gọi khi xác thực không thành công:

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

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

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

 {/* ... */}

</form>

Bây giờ bạn đã có ý tưởng rõ ràng về cách sử dụng cơ bản của hook useForm, hãy xem một ví dụ thực tế hơn:

;"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

Như bạn có thể thấy, không có thành phần nào khác được thêm vào để theo dõi các giá trị đầu vào. Móc useForm làm cho mã thành phần của bạn sạch hơn và do đó, việc bảo trì và cập nhật mã sẽ dễ dàng hơn và vì biểu mẫu của bạn không được kiểm soát nên bạn sẽ không cần sử dụng các thuộc tính như onChange và giá trị cho mỗi đầu vào của mình .

Đọc thêm  Câu chuyện về một người có thể trở thành lập trình viên chuyên nghiệp bằng cách tham dự bootcamp

Trong phần tiếp theo, chúng ta sẽ xem xét cách tiến hành thao tác xác thực trong biểu mẫu mà chúng ta đã tạo.

Xác thực biểu mẫu bằng Biểu mẫu React Hook

Để kích hoạt xác thực một trường, bạn có thể chuyển tham số xác thực cho phương thức đăng ký của mình. Các tham số xác thực tương tự như tiêu chuẩn xác thực biểu mẫu HTML. Các tham số này bao gồm các thuộc tính sau:

  • yêu cầu: Chỉ định xem trường mong muốn có bắt buộc hay không. Nếu bạn đặt thuộc tính này thành true, thì trường tương ứng không được để trống.
  • Độ dài nhỏ nhấtđộ dài tối đa : Chỉ định độ dài ký tự tối thiểu và tối đa cho giá trị của trường chuỗi.
  • tối thiểutối đa : Chỉ định giá trị số tối thiểu và tối đa cho một trường số.
  • loại : Chỉ định loại trường đầu vào. Trường này có thể là văn bản, email, số hoặc các loại đầu vào tiêu chuẩn khác trong HTML.
  • mẫu : Chỉ định mẫu giá trị đầu vào bằng một biểu thức đơn giản.

Nếu bạn định coi một trường là trường bắt buộc, mã của bạn sẽ như sau:

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

Bây giờ, nếu bạn cố chuyển trường này với một giá trị trống, đối tượng lỗi của bạn sẽ giống như mã sau:

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

{     
{

Ở đây, thuộc tính type đề cập đến loại xác thực không thành công và thuộc tính ref chứa phần tử DOM gốc.

Bạn cũng có thể bao gồm thông báo lỗi tùy chỉnh cho trường này. Chỉ cần xem xét một chuỗi cho thuộc tính xác thực của bạn thay vì giá trị boolean là đủ:

...// 

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

  <div>   

      <label>Name</label>      

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

  <div/>   

</form>

Tiếp theo, bạn có thể truy cập đối tượng lỗi bằng hook useForm:

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

Để hiển thị lỗi cho người dùng của bạn, bạn có thể làm điều này:

Đọc thêm  Việc đăng ký chương trình đào tạo lập trình C-Sharp của Danesh and Technology đã bắt đầu vào sáng nay
} <= () = 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>       
  ;(  
;{

Bạn sẽ thấy mã hoàn chỉnh bên dưới:

;"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

Nếu bạn muốn xác thực trường trong sự kiện onChange hoặc onBlur, bạn có thể chuyển thuộc tính chế độ cho hook useForm.

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

;({

Phần kết luận

React Hook Form là một plugin tuyệt vời cho hệ sinh thái mã nguồn mở React. Thư viện này giúp các nhà phát triển tạo và cập nhật biểu mẫu dễ dàng hơn nhiều. Phần tốt nhất của thư viện này là tập trung vào trải nghiệm của nhà phát triển và nó rất linh hoạt để làm việc. Ngoài ra, thư viện này tương thích tốt với các thư viện quản lý trạng thái và hoạt động tốt trong React Native.

Cái này! Hướng dẫn xây dựng biểu mẫu của chúng tôi đã kết thúc. chăm sóc bản thân. Giữ an toàn cho đến khi bài viết tiếp theo.

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button