เริ่มต้นใช้งาน React Hook Form

ยินดีต้อนรับ

เหตุผลที่ควรใช้ React Hook Form

การติดตั้ง

npm install react-hook-form

ฮุก useForm

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

การลงทะเบียนอินพุต

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

คอลแบ็ก onSubmit

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

ค่าเริ่มต้น

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

คุณสมบัติของ formState

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

การรีเซ็ตฟอร์ม

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

ข้อได้เปรียบด้านประสิทธิภาพ

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทเรียนถัดไป