Banner 1
Banner 2
hero

Phạm Văn Tú

4518 thành viên

  1. Trang chủ /
  2. Reactjs & Nextjs /
  3. Giới thiệu về React Hook Form API

Giới thiệu về React Hook Form API

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

hero