Giới thiệu về React Hook Form API
07/02/2022
Hello ae bài viết này mình sẽ sơ lược về thư viện React Hook Form API và những api mình hay dùng của thằng này nhé!
Link thư viện: React Hook Form
Mình thường sử dụng các hook chính để làm việc chủ yếu là hook useForm, Controller, ErrorMessage. Mình dùng bản v6 nhé
Hook useForm
– Nó giúp mình tạo ra 1 Object form instance. Nó cung cấp đầy đủ tất cả các phương thức giúp mình lấy được giá trị, trạng thái. set value…Bạn có thể xem code demo của doc bên dưới
const { register } = useForm({
mode: 'onSubmit', // có thể là onBlur, onChange, onTouched
reValidateMode: 'onChange',
defaultValues: {}, // gán những giá trị mặc định khởi tạo của form mình
resolver: undefined, // Để mình truyền vào cho nó 1 cái validation resolver. Thường mình dùng yup nghen
context: undefined,
criteriaMode: "firstError",
shouldFocusError: true,
shouldUnregister: true,
})
– Đầu tiên cái useForm sẽ nhận vào 1 Object như trên
Controller
– Nó giúp mình tự động bind những sự kiện vào ui control của mình
ErrorMessage
– Mỗi lần cần show lỗi thì nó giúp mình show err ra.
Bài này nói sơ qua như vậy thôi nha. Tập tiếp theo ở đây nhé hehe