كيفية بناء النماذج في التفاعل باستخدام نموذج React Hook

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

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

تثبيت نموذج React Hook

لبدء استخدام React Hook Form ، يجب عليك تثبيته باستخدام مديري حزمة npm أو yarn.

لتثبيت React Hook Form باستخدام npm ، قم بتشغيل الأمر التالي في جهازك الطرفي:

npm تثبيت شكل رد فعل هوك

لتثبيت React Hook Form باستخدام الغزل ، قم بتشغيل الأمر التالي:

إضافة الغزل شكل الخطاف رد الفعل

إنشاء نموذج باستخدام React Hook Form

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

فيما يلي مثال يوضح كيفية استخدام ملف useForm خطاف:

يستورد تتفاعل من'تتفاعل'
يستورد {useForm} من"شكل الخطاف رد الفعل";
وظيفةاستمارة() {
مقدار ثابت {register، handleSubmit} = useForm () ،
مقدار ثابت عند التقديم = (بيانات) =>وحدة التحكم.تسجيل البيانات)؛
يعود (



'نص' { ...يسجل("الاسم الأول")} />
إرسال </button>
 </form>
 )
}
يصدّرتقصير استمارة؛

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

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

للتعامل مع إرسال النموذج ، ستمرر وظيفة رد الاتصال عند تقديم الى مقبض طريقة. ال عند تقديم ستتلقى الدالة كائنًا يحتوي على قيم جميع مدخلات النموذج.

التحقق من صحة المدخلات باستخدام طريقة التسجيل

ال يسجل تسمح لك الطريقة بإعداد قواعد التحقق من صحة حقول الإدخال الخاصة بك. لإضافة التحقق من صحة حقول الإدخال الخاصة بك ، يمكنك تمرير كائن بقواعد التحقق من الصحة باعتباره الوسيطة الثانية إلى يسجل طريقة.

مثل ذلك:

يستورد تتفاعل من'تتفاعل'
يستورد {useForm} من"شكل الخطاف رد الفعل";
وظيفةاستمارة() {
مقدار ثابت{register، handleSubmit} = useForm () ،
مقدار ثابت عند التقديم = (بيانات) =>وحدة التحكم.تسجيل البيانات)؛
يعود (



'نص' { ...يسجل("الاسم الأول", { مطلوب: حقيقي})} />
'كلمة المرور' { ...يسجل("كلمة المرور", { مطلوب: حقيقي, الحد الاقصى للطول: 10})}/>
إرسال </button>
 </form>
 )
}
يصدّرتقصير استمارة؛

في هذا المثال ، أضفت قاعدة التحقق إلى حقل الإدخال "الاسم الأول" وقاعدتين للتحقق من "كلمة المرور". ال مطلوب تحدد القاعدة أن المستخدم يحتاج إلى ملء حقول الإدخال ، ولا يمكنه إرسال النموذج إذا كانت الحقول فارغة.

ال الحد الاقصى للطول تحدد القاعدة الحد الأقصى لعدد الأحرف الأبجدية لقيمة الإدخال. وبصرف النظر عن مطلوب و الحد الاقصى للطول الطرق ، يمكنك إضافة قواعد تحقق أخرى ، مثل دقيقة, الأعلى, طول دقيقة, نمط، و التحقق من صحة.

الحد الأدنى - الحد الأقصى

ال دقيقة تحدد القاعدة الحد الأدنى لقيمة حقل الإدخال و الأعلى تحدد القاعدة أقصى قيمة لها.

يمكنك استخدام ال دقيقة و الأعلى القواعد مع مدخلات من نوع الرقم ، مثل هذا:

'رقم' { ...يسجل("عمر", {دقيقة: 18, الأعلى: 35}) } />

يجب أن تكون قيمة حقل الإدخال أعلاه 18 على الأقل ولا تزيد عن 35.

طول دقيقة

ال طول دقيقة حكم مشابه ل الحد الاقصى للطول القاعدة ولكنها تحدد الحد الأدنى لعدد الأحرف الأبجدية بدلاً من ذلك:

'نص' { ...يسجل("اسم", { طول دقيقة: 10 })}/>

في هذا المثال ، تحدد القاعدة minLength أن تكون قيمة الإدخال 10 أحرف على الأقل.

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

ال نمط تحدد القاعدة نمط التعبير العادي الذي يجب أن تتطابق معه قيمة الإدخال. ال التحقق من صحة تسمح لك القاعدة بتحديد وظيفة تحقق مخصصة للتحقق من صحة قيمة الإدخال. يجب أن تعود الوظيفة أيضًا حقيقي أو رسالة خطأ سلسلة.

على سبيل المثال:

'نص' { ...يسجل("الاسم الأول", {نمط: **/^[A-Za-z]+$/**}) } />
'رقم' { ...يسجل("امتحان"، {** تحقق: (قيمة) => قيمة <= 12** }) } />

في هذا المثال ، يستخدم الإدخال "الاسم الأول" نمط قاعدة. ال نمط يتطلب أن تحتوي قيمة الإدخال على أحرف أبجدية فقط (أحرف كبيرة وصغيرة).

يستخدم إدخال "الاختبار" الامتداد التحقق من صحة قاعدة لتحديد وظيفة تحقق مخصصة تتحقق مما إذا كانت قيمتها أقل من أو تساوي 12.

معالجة الأخطاء في النموذج الخاص بك

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

ومع ذلك ، في حالة حدوث أي أخطاء في التحقق من الصحة ، يتم رفض الوعد مع وجود كائن خطأ يحتوي على أخطاء التحقق من الصحة.

فيما يلي مثال على كيفية معالجة الأخطاء باستخدام امتداد مقبض وظيفة:

يستورد تتفاعل من'تتفاعل'
يستورد {useForm} من"شكل الخطاف رد الفعل";
وظيفةاستمارة() {
مقدار ثابت {تسجيل ، handleSubmit ، حالة النموذج: {أخطاء}} = useForm () ؛
مقدار ثابت عند التقديم = (بيانات) =>وحدة التحكم.تسجيل البيانات)؛ 
يعود (



'نص' { ...يسجل("الاسم الأول", { مطلوب: حقيقي})} />
 {errors.firstname && <فترة>الرجاء إدخال اسمك الأولفترة>}
'رقم' { ...يسجل("عمر", {دقيقة: 18, الأعلى: 35,}) } />
 {أخطاء. العمر؟. النوع 'الأعلى' && <فترة> أنت كبير في السن بالنسبة لهذا الموقعفترة>}
 {أخطاء. العمر؟. النوع "دقيقة" && <فترة> أنت صغير جدًا على هذا الموقعفترة>}
إرسال </button>
 </form>
 )
}
يصدّرتقصير استمارة؛

في كتلة التعليمات البرمجية هذه ، ملف حالة النموذج كائن يحصل على الوصول إلى أخطاء كل حقل. ال أخطاء الكائن يخزن أخطاء التحقق من الصحة لكل حقل إدخال. ال أخطاء يعرض الكائن بشكل مشروط رسالة خطأ لكل حقل غير صالح.

بالنسبة إلى الاسم الأول حقل الإدخال ، إذا كان مطلوب لم يتم استيفاء القاعدة ، سيتم عرض رسالة خطأ - "الرجاء إدخال اسمك الأول" - بجوار حقل الإدخال. إذا كانت قيمة عمر حقل الإدخال خارج النطاق المسموح به ، سيتم عرض رسالة خطأ.

إذا كانت القيمة أقل من 18 ، فستكون رسالة الخطأ "أنت صغير جدًا بالنسبة لهذا الموقع" ، وإذا كانت القيمة أكبر من 35 ، فستكون رسالة الخطأ "أنت كبير جدًا على هذا الموقع".

يمكنك الآن بناء نماذج موثوقة في React

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

بمساعدة خطاف useForm ، وطريقة التسجيل ، وطريقة handleSubmit ، يصبح بناء النماذج في React عملية أكثر كفاءة وانسيابية. يمكنك إنشاء نماذج وظيفية ، مما يؤدي بدوره إلى تحسين تجربة المستخدم والجودة الشاملة لتطبيقات React الخاصة بك.