إدارة حقول إدخال متعددة في React - دليل شامل للمبتدئين

🎯 إدارة حقول إدخال متعددة في React بسهولة

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

📝 لماذا نستخدم state واحد لحقول متعددة؟

عندما يكون لدينا نموذج يحتوي على:

• حقل الاسم
• حقل البريد الإلكتروني
• حقل الهاتف
• حقل الرسالة

بدلاً من كتابة useState لكل حقل، يمكننا تجميعهم في كائن واحد مما يجعل الكود أكثر تنظيماً وسهولة في الصيانة.

🛠️ إنشاء State للحقول المتعددة

import { useState } from 'react';

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

  return (
    // سيأتي النموذج هنا
  );
}

✨ كتابة دالة معالجة التغيير الموحدة

المفتاح السحري هو استخدام خاصية name في عناصر الإدخال:

const handleInputChange = (event) => {
  const { name, value } = event.target;
  
  setFormData(prevData => ({
    ...prevData,          // نحافظ على البيانات الحالية
    [name]: value         // نحدث الحقل المحدد فقط
  }));
};

📋 بناء النموذج مع الحقول المتعددة

الآن لنطبق ما تعلمناه في نموذج اتصال كامل:

return (
  <form>
    <input
      type="text"
      name="name"
      value={formData.name}
      onChange={handleInputChange}
      placeholder="الاسم الكامل"
    />
    
    <input
      type="email"
      name="email"
      value={formData.email}
      onChange={handleInputChange}
      placeholder="البريد الإلكتروني"
    />
    
    <input
      type="tel"
      name="phone"
      value={formData.phone}
      onChange={handleInputChange}
      placeholder="رقم الهاتف"
    />
    
    <textarea
      name="message"
      value={formData.message}
      onChange={handleInputChange}
      placeholder="رسالتك"
    />
    
    <button type="submit">إرسال</button>
  </form>
);

🔍 كيف تعمل هذه التقنية؟

1. الكشف عن الحقل: نستخدم event.target.name لمعرفة أي حقل تم التعديل عليه
2. التحديث الانتقائي: نحدث فقط الحقل الذي تغير مع الحفاظ على بقية البيانات
3. الكفاءة: دالة واحدة تتعامل مع جميع الحقول بدلاً من دوال متعددة

💡 نصائح مهمة للحقول المتعددة

• تأكد أن خاصية name مطابقة تماماً لاسم الخاصية في state
• استخدم القيمة المناسبة لـ type في كل حقل إدخال
• يمكنك إضافة التحقق من الصحة لكل حقل حسب نوعه

🚀 مثال عملي: عرض البيانات المدخلة

لرؤية البيانات وهي تتغير في الوقت الحقيقي:

<div>
  <h3>معاينة البيانات:</h3>
  <p>الاسم: {formData.name}</p>
  <p>البريد: {formData.email}</p>
  <p>الهاتف: {formData.phone}</p>
  <p>الرسالة: {formData.message}</p>
</div>