البدء باستخدام 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
};

ميزة الأداء

تحقّق سريع

مراجعة

التالي