Cách xây dựng biểu mẫu trong React bằng biểu mẫu React Hook
Xây dựng biểu mẫu trong ứng dụng React có thể phức tạp và tốn thời gian. Với sự trợ giúp của thư viện React Hook Form, bạn có thể dễ dàng thêm các biểu mẫu có hiệu suất cao vào ứng dụng React của mình.
React Hook Form là một thư viện để xây dựng các biểu mẫu trong React giúp đơn giản hóa quá trình tạo các biểu mẫu phức tạp và có thể tái sử dụng. Nếu bạn đang tìm cách xây dựng ứng dụng React, bạn nên tìm hiểu cách xây dựng biểu mẫu trong React bằng thư viện Biểu mẫu React Hook.
Mục Lục
Cài đặt biểu mẫu React Hook
Để bắt đầu sử dụng React Hook Form, bạn phải cài đặt nó bằng trình quản lý gói npm hoặc yarn.
Để cài đặt React Hook Form bằng npm, hãy chạy lệnh sau trong terminal của bạn:
npm install react-hook-form
Để cài đặt React Hook Form bằng yarn, hãy chạy lệnh sau:
yarn add react-hook-form
Tạo biểu mẫu bằng biểu mẫu React Hook
Để tạo biểu mẫu bằng Biểu mẫu React Hook, bạn phải sử dụng sử dụngForm cái móc. Các sử dụngForm hook cung cấp cho bạn quyền truy cập vào các phương thức và thuộc tính mà bạn sẽ sử dụng để xây dựng và quản lý biểu mẫu trong ứng dụng React của mình.
Dưới đây là một ví dụ cho thấy làm thế nào để sử dụng sử dụngForm cái móc:
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;
Thư viện React Hook Form sử dụng đăng ký để đăng ký các giá trị đầu vào của bạn vào hook. Các đăng ký phương thức kết nối các trường đầu vào của một biểu mẫu với thư viện Biểu mẫu React Hook để thư viện có thể theo dõi và xác thực các trường đầu vào.
Trong khối mã ở trên, bạn đăng ký đầu vào có tên ‘firstname.’ Các xử lýGửi phương thức của thư viện Biểu mẫu React Hook xử lý việc gửi biểu mẫu.
Để xử lý việc gửi biểu mẫu, bạn sẽ chuyển chức năng gọi lại onSubmit đến xử lýGửi phương pháp. Các onSubmit hàm sẽ nhận một đối tượng chứa các giá trị của tất cả các đầu vào của biểu mẫu.
Xác thực đầu vào bằng phương thức đăng ký
Các đăng ký phương thức cho phép bạn thiết lập quy tắc xác thực cho các trường nhập liệu của mình. Để thêm xác thực vào các trường đầu vào của bạn, bạn chuyển một đối tượng có quy tắc xác thực làm đối số thứ hai cho đăng ký phương pháp.
Như vậy:
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;
Trong ví dụ này, bạn thêm quy tắc xác thực vào trường nhập “firstname” và hai quy tắc xác thực vào “mật khẩu”. Các yêu cầu quy tắc chỉ định rằng người dùng cần điền vào các trường đầu vào và họ không thể gửi biểu mẫu nếu các trường trống.
Các độ dài tối đa quy tắc đặt số lượng chữ cái tối đa của giá trị đầu vào. Bên cạnh yêu cầu Và độ dài tối đa phương thức, bạn có thể thêm các quy tắc xác thực khác, chẳng hạn như tối thiểu, tối đa, Độ dài nhỏ nhất, mẫuVà xác thực.
nhỏ nhất lớn nhất
Các tối thiểu quy tắc chỉ định giá trị tối thiểu cho một trường đầu vào và tối đa quy tắc chỉ định giá trị tối đa của nó.
Bạn có thể dùng tối thiểu Và tối đa quy tắc với đầu vào kiểu số, như thế này:
<input type='number' { ...register("age", {min: 18, max: 35}) } />
Giá trị của trường đầu vào ở trên ít nhất phải là 18 và không quá 35.
Độ dài nhỏ nhất
Các Độ dài nhỏ nhất quy tắc tương tự như độ dài tối đa thay vào đó đặt số lượng chữ cái trong bảng chữ cái tối thiểu:
<input type='text' { ...register("name", { minLength: 10 })}/>
Trong ví dụ này, quy tắc minLength chỉ định rằng giá trị của đầu vào phải dài ít nhất 10 ký tự.
mẫu & xác thực
Các mẫu quy tắc chỉ định một mẫu biểu thức chính quy mà giá trị đầu vào phải khớp. Các xác thực quy tắc cho phép bạn xác định chức năng xác thực tùy chỉnh để xác thực giá trị đầu vào. Hàm sẽ trả về một trong hai ĐÚNG VẬY hoặc một thông báo lỗi chuỗi.
Ví dụ:
<input type='text' { ...register("firstname", {pattern: **/^[A-Za-z]+$/**}) } />
<input type='number' { ...register("test", {**validate: (value) => value <= 12** }) } />
Trong ví dụ này, đầu vào “firstname” sử dụng mẫu luật lệ. Các mẫu yêu cầu giá trị đầu vào chỉ chứa các ký tự chữ cái (chữ hoa và chữ thường).
Đầu vào “thử nghiệm” sử dụng xác thực để xác định hàm xác thực tùy chỉnh kiểm tra xem giá trị của nó có nhỏ hơn hoặc bằng 12 hay không.
Xử lý lỗi trong biểu mẫu của bạn
Thư viện React Hook Form cung cấp cơ chế tích hợp để xử lý các lỗi JavaScript trong biểu mẫu của bạn. Các xử lýGửi chức năng, được gọi khi người dùng gửi biểu mẫu, trả về một lời hứa sẽ giải quyết với dữ liệu biểu mẫu nếu xác thực thành công.
Tuy nhiên, nếu xảy ra bất kỳ lỗi xác thực nào, lời hứa sẽ bị từ chối với một đối tượng lỗi chứa lỗi xác thực.
Đây là một ví dụ về cách xử lý lỗi bằng cách sử dụng xử lýGửi chức năng:
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;
Trong khối mã này, formState đối tượng có quyền truy cập vào các lỗi của từng trường. Các lỗi đối tượng lưu trữ các lỗi xác thực cho từng trường đầu vào. Các lỗi đối tượng hiển thị có điều kiện một thông báo lỗi cho từng trường không hợp lệ.
Cho tên đầu tiên trường đầu vào, nếu yêu cầu quy tắc không được đáp ứng, thông báo lỗi—”Vui lòng nhập Tên của bạn”—sẽ hiển thị bên cạnh trường nhập. Nếu giá trị của tuổi trường đầu vào nằm ngoài phạm vi cho phép, một thông báo lỗi sẽ hiển thị.
Nếu giá trị nhỏ hơn 18, thông báo lỗi sẽ là “Bạn quá trẻ đối với trang web này” và nếu giá trị lớn hơn 35, thông báo lỗi sẽ là “Bạn quá già đối với trang web này”.
Bây giờ bạn có thể xây dựng các biểu mẫu đáng tin cậy trong React
Xây dựng biểu mẫu trong React có thể là một quá trình phức tạp và tốn thời gian. Tuy nhiên, React Hook Form đơn giản hóa nhiệm vụ này bằng cách cung cấp một thư viện linh hoạt và dễ sử dụng để quản lý dữ liệu biểu mẫu và xác thực.
Với sự trợ giúp của useForm hook, register method và handleSubmit method, việc xây dựng các biểu mẫu trong React trở thành một quy trình hiệu quả và hợp lý hơn. Bạn có thể tạo các biểu mẫu chức năng, từ đó cải thiện trải nghiệm người dùng và chất lượng tổng thể của các ứng dụng React của bạn.