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

ارتقِ بنماذج React الخاصة بك: دليل شامل لـ React Hook Form و Yup

Majd Muhtaseb02‏/05‏/202512 دقيقة

مقدمة

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

ما هما React Hook Form و Yup؟

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

إعداد مشروعك

أولاً، قم بتثبيت الحزم الضرورية:

npm install react-hook-form 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({
  name: yup.string().required("الاسم مطلوب"),
  email: yup.string().email("تنسيق بريد إلكتروني غير صالح").required("البريد الإلكتروني مطلوب"),
}).required();

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

  const onSubmit = (data) => {
    console.log(data); // قم بمعالجة بيانات النموذج هنا
  };

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

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

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

export default MyForm;

شرح:

1. استيراد الوحدات الضرورية: نستورد useForm من react-hook-form، و yupResolver من @hookform/resolvers/yup، و yup نفسه.
2. تحديد مخطط Yup: نقوم بإنشاء مخطط Yup يحدد قواعد التحقق من الصحة لحقول النموذج الخاصة بنا. name عبارة عن سلسلة مطلوبة، و email عبارة عن سلسلة مطلوبة يجب أن تكون عنوان بريد إلكتروني صالحًا.
3. استخدام Hook useForm: إن Hook useForm هو قلب react-hook-form. نقوم بتمرير yupResolver مع المخطط الخاص بنا لدمج Yup تلقائيًا للتحقق من الصحة.
4. تسجيل مدخلات النموذج: تستخدم وظيفة register لتسجيل مدخلات النموذج مع react-hook-form. يقوم عامل التشغيل spread ...register("name") و ...register("email") بتسجيل عناصر الإدخال.
5. التعامل مع إرسال النموذج: تغلف وظيفة handleSubmit وظيفتنا onSubmit، والتي يتم استدعاؤها عند إرسال النموذج. تضمن handleSubmit التحقق من صحة النموذج قبل استدعاء onSubmit.
6. الوصول إلى أخطاء التحقق من الصحة: يحتوي كائن errors على أي أخطاء في التحقق من الصحة. يمكننا الوصول إلى رسائل الخطأ باستخدام التسلسل الاختياري (errors.name?.message).

فوائد استخدام React Hook Form و Yup

• تحسين الأداء: يقلل React Hook Form من عمليات إعادة العرض، مما يؤدي إلى أداء أفضل، خاصة في النماذج المعقدة.
• التحقق من الصحة المبسط: تجعل Yup من السهل تحديد قواعد التحقق من الصحة المعقدة وتوفر رسائل خطأ واضحة.
• تعليمات برمجية أنظف: ينتج عن الجمع بين هذه المكتبات تعليمات برمجية أنظف وأكثر قابلية للصيانة.
• تكامل سهل: تعمل حزمة @hookform/resolvers/yup على تبسيط التكامل بين React Hook Form و Yup.

خاتمة

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