شرح صفوف ومحتوى الفقرة
في صفحات HTML التقليدية كان تحديد خيار افتراضي داخل القائمة المنسدلة يتطلب وضع سمة selected على أحد عناصر <option> الفرعية. استبدلت React هذا التشتت بواجهة تحكم مركزية نظيفة على العنصر الأب <select> مباشرة.
مرر value={selectedValue} مع onChange={(e) => setSelectedValue(e.target.value)} إلى وسم <select>، وستتكفل المكتبة بإبراز الخيار المطابق تلقائياً.
HTML
function LevelFilter() {
const [level, setLevel] = useState('intermediate');
return (
<select value={level}
onChange={(e) => setLevel(e.target.value)}>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
);
}