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

1. استخدام المكونات الخاضعة للرقابة

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

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  

2. معالجة الأخطاء

 
تعد معالجة الأخطاء والتحقق من صحتها جزءًا مهمًا من النموذج. يجب عليك التحقق من صحة الأخطاء والتحقق منها لكل قيمة يدخلها المستخدم والتعامل مع جميع الحالات مثل:

• الحصول على قيمة فارغة/غير محددة
• الحصول على قيمة فارغة
• نوع البيانات غير صالح وما إلى ذلك

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

لنرى كيفية تنفيذ منطق التحقق المخصص

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  

 
لسهولة العمل، يجب عليك استخدام حزمة Yup للتحقق من صحة بيانات النموذج بسلاسة. إنها حزمة شائعة جدًا تُستخدم مع مكتبات النماذج مثل React-Hook-Form أو Formik.
نعم المستندات: https://www.npmjs.com/package/yup
 

3. الاستفادة من مكتبات الطرف الثالث

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

استخدام الفورميك:

المستندات :- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   
 
    
Sign Up
     {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  

    First Name
    Last Name
    Email
    Submit
  
 
);


ReactDOM.render(, document.getElementById('root'));

انقر للتحقق من العرض التجريبي المباشر للفورميك

خاتمة

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