دليل شامل لاستخدام عنصر Select في React للمبتدئين خطوة بخطوة

📝 دليل شامل لاستخدام عنصر Select في React

عنصر Select أو القائمة المنسدلة هو أحد عناصر النماذج الأساسية في React الذي يسمح للمستخدمين باختيار خيار من عدة خيارات متاحة. دعنا نتعلم كيفية استخدامه بشكل صحيح! 🎯

أساسيات عنصر Select في JSX

في React، نكتب عنصر Select باستخدام JSX مشابه للـ HTML ولكن مع بعض الاختلافات المهمة. إليك الشكل الأساسي:

<select>
  <option value="option1">الخيار الأول</option>
  <option value="option2">الخيار الثاني</option>
  <option value="option3">الخيار الثالث</option>
</select>

ملاحظة مهمة: يجب أن تحتوي كل عنصر option على خاصية value لأن React يعتمد عليها في التعرف على القيمة المختارة.

ربط Select مع State

لإدارة القيمة المختارة في Select، نحتاج إلى ربطه بحالة (state) في المكون:

import { useState } from 'react';

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

  return (
    <select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
      <option value="">اختر خياراً</option>
      <option value="apple">تفاح</option>
      <option value="banana">موز</option>
      <option value="orange">برتقال</option>
    </select>
  );
}

في هذا المثال، نستخدم useState لإنشاء حالة selectedOption وتحديثها عند تغيير الاختيار.

معالجة حدث onChange

حدث onChange هو الأكثر استخداماً مع عنصر Select. يحدث عندما يقوم المستخدم بتغيير الاختيار:

const handleChange = (event) => {
  console.log('القيمة المختارة:', event.target.value);
  setSelectedOption(event.target.value);
};

يمكنك استخدام هذه الدالة لتنفيذ أي actions إضافية عند تغيير الاختيار.

مثال عملي متكامل

لنرى مثالاً عملياً يدمج كل ما تعلمناه:

import { useState } from 'react';

function FruitSelector() {
  const [selectedFruit, setSelectedFruit] = useState('');

  const handleFruitChange = (event) => {
    setSelectedFruit(event.target.value);
  };

  return (
    <div>
      <h3>اختر فاكهتك المفضلة:</h3>
      <select value={selectedFruit} onChange={handleFruitChange}>
        <option value="">-- اختر من القائمة --</option>
        <option value="apple">تفاح 🍎</option>
        <option value="banana">موز 🍌</option>
        <option value="orange">برتقال 🍊</option>
        <option value="grape">عنب 🍇</option>
      </select>
      
      {selectedFruit && (
        <p>الفاكهة المختارة: {selectedFruit}</p>
      )}
    </div>
  );
}

نصائح مهمة للاستخدام

1. استخدم value بدلاً من defaultValue في React للتحكم الكامل في القيمة
2. اجعل option الأولى فارغة كخيار افتراضي لتوجيه المستخدم
3. استخدم التعليقات التوضيحية للخيارات لتحسين تجربة المستخدم
4. تحقق من القيم قبل معالجتها للتأكد من صحتها

الأخطاء الشائعة وتجنبها

• ❌ نسيان خاصية value في عنصر option
• ✅ الحل: تأكد من وجود value في كل option
• ❌ عدم ربط value مع state
• ✅ الحل: استخدم value={stateValue} وonChange
• ❌ استخدام defaultValue في المكونات المتحكم بها
• ✅ الحل: استخدم value مع onChange للتحكم الكامل