العودة للمقالات

ارتقِ بمستوى نماذج React الخاصة بك: إتقان React Hook Form في عام 2024

Majd Muhtaseb03‏/10‏/20258 دقيقة

مقدمة

يمكن أن يكون التعامل مع النماذج في React مملًا. يوفر React Hook Form حلاً مرنًا وعالي الأداء من خلال الاستفادة من المكونات غير المتحكم بها وتقليل عمليات إعادة العرض. تتعمق هذه المقالة في المفاهيم الأساسية وأفضل الممارسات لاستخدام React Hook Form في مشاريعك.

لماذا React Hook Form؟

• الأداء: يقلل من عمليات إعادة العرض باستخدام المكونات غير المتحكم بها.
• تجربة المطور: واجهة برمجة تطبيقات بسيطة ومنهجية بديهية تعتمد على الخطافات (hooks).
• التحقق من الصحة: دعم مدمج لمكتبات التحقق من الصحة المختلفة مثل Yup و Zod.
• TypeScript: دعم ممتاز لـ TypeScript لسلامة الأنواع.

البدء

قم بتثبيت React Hook Form:

npm install react-hook-form

مثال أساسي

إليك مثال بسيط لنموذج باستخدام React Hook Form:

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

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">الاسم الأول:</label>
      <input type="text" id="firstName" {...register("firstName", { required: "الاسم الأول مطلوب" })} />
      {errors.firstName && <p>{errors.firstName.message}</p>}

      <label htmlFor="lastName">الاسم الأخير:</label>
      <input type="text" id="lastName" {...register("lastName")} />

      <button type="submit">إرسال</button>
    </form>
  );
}

export default MyForm;

شرح:

• useForm() تُرجع مجموعة من الوظائف، بما في ذلك register و handleSubmit و formState.
• يتم استخدام register لتسجيل حقول الإدخال الخاصة بك مع React Hook Form. يمكنك أيضًا تحديد قواعد التحقق من الصحة هنا.
• تأخذ handleSubmit وظيفة الإرسال الخاصة بك وتعالج التحقق من صحة النموذج قبل استدعائه.
• تحتوي errors على أي أخطاء في التحقق من الصحة.

التحقق من الصحة

يمكن دمج React Hook Form بسهولة مع مكتبات التحقق من الصحة. إليك مثال باستخدام Yup:

npm install yup @hookform/resolvers

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

const schema = yup.object({
  firstName: yup.string().required("الاسم الأول مطلوب"),
  lastName: yup.string().required("الاسم الأخير مطلوب"),
  email: yup.string().email("تنسيق بريد إلكتروني غير صالح").required("البريد الإلكتروني مطلوب"),
}).required();


function YupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="firstName">الاسم الأول:</label>
      <input type="text" id="firstName" {...register("firstName")} />
      {errors.firstName && <p>{errors.firstName.message}</p>}

      <label htmlFor="lastName">الاسم الأخير:</label>
      <input type="text" id="lastName" {...register("lastName")} />
      {errors.lastName && <p>{errors.lastName.message}</p>}

      <label htmlFor="email">البريد الإلكتروني:</label>
      <input type="email" id="email" {...register("email")} />
      {errors.email && <p>{errors.email.message}</p>}

      <button type="submit">إرسال</button>
    </form>
  );
}

export default YupForm;

الأخطاء الشائعة وأفضل الممارسات

• المكونات غير المتحكم بها: استخدم المكونات غير المتحكم بها لتحسين الأداء.
• defaultValue مقابل defaultValues: استخدم defaultValues عند تهيئة النموذج ببيانات موجودة.
• انتبه لعمليات إعادة العرض: استخدم useWatch أو مكون Controller بعناية لتجنب عمليات إعادة العرض غير الضرورية.
• الاستفادة من TypeScript: حدد أنواع مخطط النموذج الخاص بك لتعزيز سلامة الأنواع.

خاتمة

React Hook Form هي أداة قوية لإنشاء نماذج عالية الأداء وسهلة الاستخدام في React. من خلال فهم مفاهيمها الأساسية وأفضل ممارساتها، يمكنك تبسيط عملية تطوير النموذج الخاص بك وإنشاء تجربة مستخدم أفضل.