ارتقِ بنماذج React الخاصة بك: دليل شامل لـ React Hook Form و Yup
مقدمة
قد يكون بناء النماذج في 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;
شرح:
- استيراد الوحدات الضرورية: نستورد
useForm
منreact-hook-form
، وyupResolver
من@hookform/resolvers/yup
، وyup
نفسه. - تحديد مخطط Yup: نقوم بإنشاء مخطط Yup يحدد قواعد التحقق من الصحة لحقول النموذج الخاصة بنا.
name
عبارة عن سلسلة مطلوبة، وemail
عبارة عن سلسلة مطلوبة يجب أن تكون عنوان بريد إلكتروني صالحًا. - استخدام Hook
useForm
: إن HookuseForm
هو قلبreact-hook-form
. نقوم بتمريرyupResolver
مع المخطط الخاص بنا لدمج Yup تلقائيًا للتحقق من الصحة. - تسجيل مدخلات النموذج: تستخدم وظيفة
register
لتسجيل مدخلات النموذج معreact-hook-form
. يقوم عامل التشغيل spread...register("name")
و...register("email")
بتسجيل عناصر الإدخال. - التعامل مع إرسال النموذج: تغلف وظيفة
handleSubmit
وظيفتناonSubmit
، والتي يتم استدعاؤها عند إرسال النموذج. تضمنhandleSubmit
التحقق من صحة النموذج قبل استدعاءonSubmit
. - الوصول إلى أخطاء التحقق من الصحة: يحتوي كائن
errors
على أي أخطاء في التحقق من الصحة. يمكننا الوصول إلى رسائل الخطأ باستخدام التسلسل الاختياري (errors.name?.message
).
فوائد استخدام React Hook Form و Yup
- تحسين الأداء: يقلل React Hook Form من عمليات إعادة العرض، مما يؤدي إلى أداء أفضل، خاصة في النماذج المعقدة.
- التحقق من الصحة المبسط: تجعل Yup من السهل تحديد قواعد التحقق من الصحة المعقدة وتوفر رسائل خطأ واضحة.
- تعليمات برمجية أنظف: ينتج عن الجمع بين هذه المكتبات تعليمات برمجية أنظف وأكثر قابلية للصيانة.
- تكامل سهل: تعمل حزمة
@hookform/resolvers/yup
على تبسيط التكامل بين React Hook Form و Yup.
خاتمة
React Hook Form
و Yup
هما مزيج قوي لبناء نماذج قوية ومُدققة في React. من خلال الاستفادة من هذه المكتبات، يمكنك تبسيط التعامل مع النماذج وتحسين الأداء وكتابة تعليمات برمجية أنظف. جرب قواعد التحقق من الصحة وتكوينات النموذج المختلفة لإطلاق الإمكانات الكاملة لهذه الأدوات.