ارتقِ بنماذج React الخاصة بك: إتقان React Hook Form الإصدار الثامن

Majd Muhtaseb21‏/08‏/20257 دقيقة

ارتقِ بنماذج React الخاصة بك: إتقان React Hook Form الإصدار الثامن

مقدمة

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

التثبيت

أولاً، قم بتثبيت المكتبة:

npm install react-hook-form
# أو
yarn add 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 hook: يوفر هذا الخطاف الوظائف الأساسية لإدارة حالة النموذج.
register: تُستخدم هذه الوظيفة لتسجيل حقول الإدخال وإرفاق قواعد التحقق من الصحة. تمرر علامة الانتشار (...) الخصائص الضرورية إلى عنصر الإدخال.
handleSubmit: هذه الوظيفة تغلف منطق إرسال النموذج الخاص بك.
formState.errors: يحتوي هذا الكائن على أي أخطاء في التحقق من الصحة.

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

يوفر React Hook Form إمكانات قوية للتحقق من الصحة. يمكنك تحديد قواعد التحقق من الصحة مباشرة داخل وظيفة register:

<input
  type="email"
  id="email"
  {...register("email", {
    required: "البريد الإلكتروني مطلوب",
    pattern: {
      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: "تنسيق البريد الإلكتروني غير صالح",
    },
  })}
/>
{errors.email && <p>{errors.email.message}</p>}

شرح:

required: يجعل الحقل إلزاميًا.
pattern: يستخدم تعبيرًا نمطيًا للتحقق من صحة تنسيق البريد الإلكتروني.
يتم عرض رسائل الخطأ بشكل مشروط بناءً على وجود الأخطاء.

المكونات التي يتم التحكم فيها

يمكن لـ React Hook Form الاندماج بسلاسة مع المكونات التي يتم التحكم فيها. يمكنك استخدام مكون Controller لإدارة الحالة وتمرير القيم إلى واجهة المستخدم الخاصة بك.

import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select'; // بافتراض أن لديك react-select مثبتًا

function MyFormWithSelect() {
    const { control, handleSubmit } = useForm();

    const options = [
        { value: 'chocolate', label: 'شوكولاتة' },
        { value: 'strawberry', label: 'فراولة' },
        { value: 'vanilla', label: 'فانيليا' },
    ];

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

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <Controller
                name="flavor"
                control={control}
                defaultValue={null}
                render={({ field }) => (
                    <Select
                        {...field}
                        options={options}
                        isClearable
                    />
                )}
            />
            <button type="submit">إرسال</button>
        </form>
    );
}

export default MyFormWithSelect;

خاتمة

React Hook Form يبسط إدارة النموذج في تطبيقات React. إن نهجها القائم على الخطافات وقدرات التحقق من الصحة ودعم المكونات التي يتم التحكم فيها يجعلها أداة قيمة لأي مطور React. يعزز الإصدار الثامن قابليته للاستخدام وأدائه. تذكر الرجوع إلى الوثائق الرسمية للحصول على مزيد من المعلومات التفصيلية والميزات المتقدمة.