دليل المبتدئين لاستخدام Radio Buttons في React - شرح شامل

📻 دليل شامل لاستخدام أزرار الراديو في React للمبتدئين

أزرار الراديو (Radio Buttons) هي عناصر واجهة مستخدم أساسية تسمح للمستخدمين باختيار خيار واحد فقط من مجموعة من الخيارات المتاحة. في React، نتعامل معها بشكل مختلف قليلاً عن HTML العادية.

🔍 ما هي أزرار الراديو ولماذا نستخدمها؟

أزرار الراديو مثالية عندما تريد من المستخدم اختيار خيار واحد فقط من عدة خيارات متاحة. تختلف عن Checkboxes التي تسمح باختيار multiple options.

مثال على حالات الاستخدام:

• اختيار الجنس (ذكر/أنثى)
• تحديد فئة عمرية
• اختيار طريقة دفع

🛠️ إنشاء مجموعة Radio Buttons أساسية

لإنشاء مجموعة Radio Buttons في React، نستخدم عنصر input مع نوع radio:

function RadioGroup() {
  return (
    <div>
      <label>
        <input type="radio" name="gender" value="male" />
        ذكر
      </label>
      <label>
        <input type="radio" name="gender" value="female" />
        أنثى
      </label>
    </div>
  );
}

لاحظ أن جميع الأزرار في المجموعة يجب أن يكون لها نفس الاسم (name) ليعملوا كمجموعة واحدة.

🎯 Controlled Components في React

في React، نفضل استخدام Controlled Components حيث تكون قيمة الـ Radio Button مخزنة في state:

import { useState } from 'react';

function ControlledRadio() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <label>
        <input 
          type="radio" 
          value="option1" 
          checked={selectedOption === 'option1'} 
          onChange={handleChange} 
        />
        الخيار الأول
      </label>
      <label>
        <input 
          type="radio" 
          value="option2" 
          checked={selectedOption === 'option2'} 
          onChange={handleChange} 
        />
        الخيار الثاني
      </label>
    </div>
  );
}

📝 أفضل الممارسات لتصميم Radio Groups

1. استخدم labels دائماً: اجعل واجهة المستخدم قابلة للنقر بالكامل
2. مجموعة واضحة: ضع الأزرار في تخطيط منطقي وواضح
3. القيمة الافتراضية: فكر في تعيين قيمة افتراضية عندما يكون ذلك مناسباً

function BetterRadioGroup() {
  const [paymentMethod, setPaymentMethod] = useState('credit-card');

  return (
    <fieldset>
      <legend>اختر طريقة الدفع:</legend>
      
      <label style={{ display: 'block', margin: '10px 0' }}>
        <input 
          type="radio" 
          value="credit-card" 
          checked={paymentMethod === 'credit-card'} 
          onChange={(e) => setPaymentMethod(e.target.value)} 
        />
        💳 بطاقة ائتمان
      </label>

      <label style={{ display: 'block', margin: '10px 0' }}>
        <input 
          type="radio" 
          value="paypal" 
          checked={paymentMethod === 'paypal'} 
          onChange={(e) => setPaymentMethod(e.target.value)} 
        />
        📧 PayPal
      </label>
    </fieldset>
  );
}

🚀 معالجة البيانات وإرسال النماذج

عند إرسال النموذج، يمكنك الوصول إلى القيمة المحددة بسهولة:

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('بيانات النموذج:', formData);
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        name="name" 
        placeholder="الاسم"
        value={formData.name}
        onChange={handleInputChange}
      />
      
      <div>
        <label>
          <input 
            type="radio" 
            name="gender" 
            value="male" 
            checked={formData.gender === 'male'} 
            onChange={handleInputChange} 
          />
          ذكر
        </label>
        <label>
          <input 
            type="radio" 
            name="gender" 
            value="female" 
            checked={formData.gender === 'female'} 
            onChange={handleInputChange} 
          />
          أنثى
        </label>
      </div>

      <button type="submit">تسجيل</button>
    </form>
  );
}

💡 نصائح مهمة للمبتدئين

1. لا تنسى خاصية checked: يجب ربطها مع القيمة في state
2. استخدم onChange: للتعامل مع تغييرات المستخدم
3. نفس الاسم للمجموعة: ensures only one selection
4. القيم يجب أن تكون فريدة: لكل radio button قيمة مختلفة