React useFormState: دليل شامل لإدارة حالة النموذج

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

ما هو useFormState؟

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

بالمقارنة مع الأساليب التقليدية التي تستخدم useState لكل حقل نموذج، يقدم useFormState العديد من المزايا:

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

الاستخدام الأساسي

لنبدأ بمثال أساسي لكيفية استخدام useFormState في نموذج بسيط مع حقلي إدخال: الاسم والبريد الإلكتروني.

التثبيت

أولاً، ستحتاج إلى تثبيت خطاف useFormState. ستعتمد طريقة تثبيته على المكتبة أو الإطار الذي تستخدمه والذي يوفر الخطاف (على سبيل المثال، React Hook Form أو Formik مع خطاف مخصص أو حل مشابه). يستخدم هذا المثال مكتبة افتراضية تسمى react-form-state (استبدلها بمكتبتك الفعلية):

            npm install react-form-state

            

              
                Copy
              
            
          

مثال على التعليمات البرمجية

            import React from 'react';
import { useFormState } from 'react-form-state';

function MyForm() {
  const { values, errors, touched, handleChange, handleSubmit, isSubmitting } = useFormState({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: async (values) => {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(values));
    },
    validate: (values) => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Name is required';
      }
      if (!values.email) {
        errors.email = 'Email is required';
      } else if (!/^\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/.test(values.email)) {
        errors.email = 'Invalid email format';
      }
      return errors;
    },
  });

  return (
    

      

        Name:
        
        {touched.name && errors.name && {errors.name}}
      
      

        Email:
        
        {touched.email && errors.email && {errors.email}}
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

شرح

• استيراد useFormState: نستورد خطاف useFormState من مكتبة react-form-state.
• تهيئة الخطاف: نستدعي useFormState بكائن خيارات. يتضمن هذا الكائن:
• initialValues: كائن يحدد القيم الأولية لحقول النموذج.
• onSubmit: دالة يتم استدعاؤها عند إرسال النموذج. تتلقى قيم النموذج كحجة. في هذا المثال، نقوم بمحاكاة استدعاء API باستخدام setTimeout.
• validate: دالة تتحقق من صحة قيم النموذج. يجب أن تُرجع كائنًا تكون فيه المفاتيح هي أسماء الحقول والقيم هي رسائل الخطأ. إذا كان الحقل صالحًا، فلا ينبغي تضمينه في الكائن الذي تم إرجاعه.
• تفكيك القيم: نقوم بتفكيك القيمة المرجعة لـ useFormState للحصول على القيم التالية:
• values: كائن يحتوي على القيم الحالية لحقول النموذج.
• errors: كائن يحتوي على أي أخطاء في التحقق من الصحة.
• touched: كائن يشير إلى الحقول التي تم لمسها (أي تم التركيز عليها ثم تم إبعاد التركيز عنها).
• handleChange: دالة تقوم بتحديث قيم النموذج عند تغيير حقول الإدخال.
• handleSubmit: دالة تتعامل مع إرسال النموذج.
• isSubmitting: قيمة منطقية تشير إلى ما إذا كان النموذج قيد الإرسال حاليًا.
• عرض النموذج: نعرض النموذج بحقول الإدخال. يتم توصيل كل حقل إدخال بكائن values ودالة handleChange.
• عرض الخطأ: نعرض رسائل الخطأ لكل حقل إذا تم لمس الحقل وكان هناك خطأ.
• زر الإرسال: يتم تعطيل زر الإرسال أثناء إرسال النموذج.

ميزات متقدمة

يقدم useFormState مجموعة من الميزات المتقدمة للتعامل مع سيناريوهات النموذج الأكثر تعقيدًا.

التحقق المخصص

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

            const validate = (values) => {
  const errors = {};
  if (!values.phoneNumber) {
    errors.phoneNumber = 'Phone number is required';
  } else {
    // Example: Validate US phone number format
    if (values.countryCode === 'US' && !/^\\d{3}-\\d{3}-\\d{4}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid US phone number format (e.g., 123-456-7890)';
    }
    // Example: Validate UK phone number format
    if (values.countryCode === 'UK' && !/^\\d{5} \\d{6}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid UK phone number format (e.g., 01632 960001)';
    }
    // More country-specific validation can be added here
  }
  return errors;
};

            

              
                Copy
              
            
          

التحقق غير المتزامن

للتحقق الذي يتطلب عمليات غير متزامنة (على سبيل المثال، التحقق مما إذا كان اسم المستخدم متاحًا)، يمكنك استخدام دالة validate غير متزامنة.

            const validate = async (values) => {
  const errors = {};
  // Simulate an API call to check username availability
  const isUsernameAvailable = await checkUsernameAvailability(values.username);
  if (!isUsernameAvailable) {
    errors.username = 'Username is already taken';
  }
  return errors;
};

async function checkUsernameAvailability(username) {
  // Replace with your actual API call
  await new Promise((resolve) => setTimeout(resolve, 500));
  // Simulate username taken
  return username !== 'taken_username';
}

            

              
                Copy
              
            
          

النماذج الديناميكية

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

            import React, { useState } from 'react';
import { useFormState } from 'react-form-state';

function DynamicForm() {
  const [items, setItems] = useState(['item1']);

  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: items.reduce((acc, item) => {
      acc[item] = '';
      return acc;
    }, {}),
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addItem = () => {
    const newItem = `item${items.length + 1}`;
    setItems([...items, newItem]);
  };

  return (
    

      {items.map((item) => (
        

          {item}:
          
        
      ))}
      
        Add Item
      
      Submit
    
  );
}

export default DynamicForm;

            

              
                Copy
              
            
          

التعامل مع حقول المصفوفة

عندما يتضمن النموذج الخاص بك حقول مصفوفة (على سبيل المثال، قائمة بالهوايات أو المهارات)، يمكن تكييف useFormState لإدارة قيم المصفوفة هذه بكفاءة. إليك مثال:

            import React from 'react';
import { useFormState } from 'react-form-state';

function SkillsForm() {
  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: [''], // Start with one empty skill
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addSkill = () => {
    handleChange({ target: { name: 'skills', value: [...values.skills, ''] } });
  };

  const updateSkill = (index, value) => {
    const newSkills = [...values.skills];
    newSkills[index] = value;
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    

      Skills:
      {values.skills.map((skill, index) => (
        

           updateSkill(index, e.target.value)}
          />
        
      ))}
      
        Add Skill
      
      Submit
    
  );
}

export default SkillsForm;

            

              
                Copy
              
            
          

اعتبارات إمكانية الوصول

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

• استخدم HTML الدلالي: استخدم عناصر HTML المناسبة مثل <label> و <input> و <textarea> و <button>.
• توفير تسميات لجميع حقول النموذج: استخدم عنصر <label> لربط التسميات بحقول النموذج. تأكد من أن سمة for للتسمية تتطابق مع سمة id لحقل الإدخال.
• استخدم سمات ARIA: استخدم سمات ARIA لتوفير معلومات إضافية حول حقول النموذج للتقنيات المساعدة. على سبيل المثال، استخدم aria-describedby لربط رسائل الخطأ بحقول النموذج.
• توفير رسائل خطأ واضحة وموجزة: يجب أن تكون رسائل الخطأ سهلة الفهم ويجب أن تقدم إرشادات حول كيفية تصحيح الأخطاء.
• ضمان تباين ألوان كافٍ: استخدم تباين ألوان كافٍ بين النص وألوان الخلفية لجعل النموذج قابلاً للقراءة للمستخدمين الذين يعانون من ضعف البصر.
• الاختبار باستخدام التقنيات المساعدة: اختبر النموذج باستخدام التقنيات المساعدة مثل برامج قراءة الشاشة للتأكد من إمكانية الوصول إليه للمستخدمين ذوي الإعاقة.

أفضل الممارسات

فيما يلي بعض أفضل الممارسات لاستخدام useFormState:

• حافظ على دالة validate نقية: يجب أن تكون دالة validate دالة نقية، مما يعني أنه لا ينبغي أن يكون لها أي آثار جانبية ويجب أن تُرجع دائمًا نفس الإخراج لنفس الإدخال.
• استخدم التخزين المؤقت: استخدم التخزين المؤقت لتحسين أداء النموذج. يمكن أن يساعد التخزين المؤقت في منع إعادة عرض مكونات النموذج غير الضرورية.
• استخدم اصطلاح تسمية متسق: استخدم اصطلاح تسمية متسق لحقول النموذج وأخطاء التحقق من الصحة. سيجعل هذا التعليمات البرمجية أسهل في القراءة والصيانة.
• اكتب اختبارات الوحدة: اكتب اختبارات الوحدة للتأكد من أن النموذج يعمل بشكل صحيح. يمكن أن تساعد اختبارات الوحدة في اكتشاف الأخطاء في وقت مبكر من عملية التطوير.
• ضع في اعتبارك التدويل (i18n): بالنسبة للتطبيقات العالمية، تأكد من أن تسميات النموذج ورسائله وقواعد التحقق من الصحة تدعم لغات متعددة. يمكن أن تساعد مكتبات مثل react-intl أو i18next في ذلك.

أمثلة دولية

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

• أرقام الهواتف: لدى البلدان المختلفة تنسيقات أرقام هواتف مختلفة. استخدم مكتبة مثل libphonenumber-js للتحقق من صحة أرقام الهواتف بناءً على رمز البلد.
• الرموز البريدية: تختلف الرموز البريدية اختلافًا كبيرًا عبر البلدان. تستخدم بعض البلدان رموزًا بريدية رقمية، بينما يستخدم البعض الآخر رموزًا أبجدية رقمية. قم بتنفيذ منطق التحقق الذي يدعم تنسيقات الرموز البريدية المختلفة.
• تنسيقات التاريخ: تختلف تنسيقات التاريخ عبر الثقافات. تستخدم بعض البلدان تنسيق MM/DD/YYYY، بينما يستخدم البعض الآخر تنسيق DD/MM/YYYY. استخدم مكتبة مثل moment.js أو date-fns لتنسيق وتحليل التواريخ بناءً على لغة المستخدم.
• تنسيقات العناوين: تختلف تنسيقات العناوين أيضًا عبر البلدان. تتطلب بعض البلدان أن يكون عنوان الشارع في السطر الأول، بينما يتطلب البعض الآخر أن تكون المدينة والرمز البريدي في السطر الأول. استخدم مكتبة أو واجهة برمجة تطبيقات لتنسيق العناوين بناءً على بلد المستخدم.
• تنسيقات العملة: اعرض قيم العملة بالتنسيق المناسب للغة المستخدم. استخدم واجهة برمجة تطبيقات Intl.NumberFormat لتنسيق قيم العملة.

على سبيل المثال، ضع في اعتبارك نموذج تسجيل يحتاج إلى جمع رقم هاتف. بدلاً من حقل واحد "رقم الهاتف"، قد يكون من المفيد وجود حقول منفصلة لـ "رمز البلد" و "رقم الهاتف" جنبًا إلى جنب مع مكتبة التحقق للتكيف مع التنسيق المحلي المحدد.

بدائل لـ useFormState

في حين أن useFormState يقدم حلاً مناسبًا لإدارة حالة النموذج، إلا أن هناك مكتبات وأساليب شائعة أخرى يمكنك وضعها في الاعتبار:

• Formik: مكتبة مستخدمة على نطاق واسع توفر ميزات إدارة النماذج الشاملة، بما في ذلك إدارة الحالة والتحقق من الصحة ومعالجة الإرسال.
• React Hook Form: مكتبة عالية الأداء تستفيد من خطاف useRef الخاص بـ React لتقليل عمليات إعادة العرض وتحسين أداء النموذج.
• Redux Form: مكتبة تتكامل مع Redux لإدارة حالة النموذج. هذا خيار جيد إذا كنت تستخدم Redux بالفعل في تطبيقك.
• الخطافات المخصصة: يمكنك إنشاء خطافات مخصصة خاصة بك لإدارة حالة النموذج. يمنحك هذا أكبر قدر من المرونة ولكنه يتطلب المزيد من الجهد.

الخلاصة

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

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