شرح صفوف ومحتوى الفقرة
يمنحك إتقان أنماط الربط الخمسة هذه سيطرة تصريحية كاملة على لوحات الإعدادات وفلاتر المتاجر ونماذج التسجيل المتقدمة دون أي استعلام يدوي من شجرة المتصفح. اعتمد الجدول المرجعي التالي عند بناء أي نموذج:
| عنصر النموذج | خاصية ربط الحالة | تعبير قراءة التغيير في onChange |
|---|---|---|
| القائمة المنسدلة select | خاصية value={selectedOption} | تحديث القيمة عبر e.target.value |
| خانة الاختيار المفردة | خاصية checked={isAgreed} | قراءة المنطق عبر e.target.checked |
| مجموعة خانات متعددة | فحص checked={list.includes(id)} | إضافة بالانتشار أو حذف بدالة filter |
| أزرار radio وشريط range | مقارنة checked أو تمرير value | قراءة النص أو تحويله بدالة Number |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس التحكم في قوائم select عبر خاصية value على العنصر الأب، وربط خانات الاختيار المفردة والمتعددة عبر خاصية checked، ومزامنة أزرار الانتقاء الحصرية وتحويل مدخلات الأرقام بأمان. الخطوة التالية: انتقل الآن إلى الدرس رقم 24 «إدارة النماذج متعددة الحقول والتحقق من المدخلات» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.