مكون Checkbox في React - دليل شامل للمبتدئين

📋 دليل شامل لاستخدام Checkbox في React

مرحباً بك في درس اليوم! سنتعلم كيفية إنشاء وإدارة مكون Checkbox في React بطريقة بسيطة وسهلة الفهم. Checkbox هو عنصر أساسي في أي تطبيق ويب يسمح للمستخدمين باختيار خيارات متعددة.

🎯 ما هو Checkbox؟

Checkbox هو عنصر إدخال في HTML يسمح للمستخدمين بتحديد أو إلغاء تحديد خيار معين. في React، نتعامل مع Checkbox كمكون مُتحكم به (Controlled Component) حيث ندير حالته بشكل كامل.

🔧 إنشاء Checkbox أساسي

لنبدأ بأبسط شكل لـ Checkbox في React:

function SimpleCheckbox() {
  return (
    <div>
      <label>
        <input type="checkbox" />
        أوافق على الشروط والأحكام
      </label>
    </div>
  );
}

في هذا المثال البسيط، أنشأنا Checkbox أساسي بدون أي تفاعل.

🎮 إدارة حالة Checkbox

لجعل Checkbox تفاعلياً، نحتاج إلى إدارة حالته باستخدام useState:

import { useState } from 'react';

function InteractiveCheckbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <label>
        <input 
          type="checkbox"
          checked={isChecked}
          onChange={handleChange}
        />
        أوافق على الاشتراك في النشرة البريدية
      </label>
      <p>الحالة الحالية: {isChecked ? 'محدد' : 'غير محدد'}</p>
    </div>
  );
}

📝 شرح الكود السابق:

• useState(false): نبدأ بحالة افتراضية غير محددة
• checked={isChecked}: نربط حالة المربع بالمتغير
• onChange={handleChange}: نربط دالة التغيير بالحدث

🎪 مجموعة Checkboxes

لنرى كيفية عمل مجموعة من خانات الاختيار:

function CheckboxGroup() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleOptionChange = (option) => {
    if (selectedOptions.includes(option)) {
      setSelectedOptions(selectedOptions.filter(item => item !== option));
    } else {
      setSelectedOptions([...selectedOptions, option]);
    }
  };

  return (
    <div>
      <h3>اختر اهتماماتك:</h3>
      <label>
        <input
          type="checkbox"
          checked={selectedOptions.includes('programming')}
          onChange={() => handleOptionChange('programming')}
        />
        برمجة
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          checked={selectedOptions.includes('design')}
          onChange={() => handleOptionChange('design')}
        />
        تصميم
      </label>
    </div>
  );
}

💡 نصائح مهمة

1. استخدم label دائماً: لتحسين تجربة المستخدم وإمكانية الوصول
2. اختر أسماء واضحة: للمتغيرات والدوال
3. اختبر الحالات: تأكد من عمل Checkbox في جميع الحالات (محدد/غير محدد)

🚀 تجربة عملية

جرب هذا المثال البسيط لترى Checkbox في العمل:

function PracticeCheckbox() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <label>
        <input
          type="checkbox"
          checked={isActive}
          onChange={() => setIsActive(!isActive)}
        />
        تفعيل الميزة
      </label>
      {isActive && <p>🎉 الميزة مفعلة الآن!</p>}
    </div>
  );
}

ماذا سنتعلم في الدرس القادم؟

في الدرس القادم، سننتقل إلى مكونات أكثر تقدماً وسنتعلم عن مكونات Radio Button في React وكيفية استخدامها لإنشاء خيارات اختيار وحيد. سنرى الفروقات بين Checkbox وRadio Button ومتى نستخدم كل منها!