React • المستوى الثاني • الدرس 3

معالجة الأحداث والمدخلات (Event Handling & Forms)

أهداف الدرس العلمية

ربط الأحداث مع المكونات كـ onChange و onClick.
بناء النماذج المدارة (Controlled Components).
قراءة قيمة المدخل عبر e.target.value.
مزامنة الحالة مع واجهة المستخدم بشكل حي (Live Sync).

1. المكونات المدارة (Controlled Inputs)

في React، نُدير قيمة حقل الإدخال عبر الـ State بدلاً من ترك المتصفح يديرها. هذا يمنحنا تحكماً كاملاً بقيمة الحقل في كل لحظة.

javascript

const [text, setText] = useState('');

<input 
  value={text}                                // ← القيمة من الحالة
  onChange={(e) => setText(e.target.value)}   // ← تحديث الحالة
/>

2. دورة البيانات (Data Flow)

دورة البيانات في النماذج المدارة تكون على شكل حلقة مغلقة:

المستخدم يكتب → onChange يُستدعى → setText يُحدّث الحالة → React يُعيد الرسم → الحقل يعرض القيمة الجديدة

التطبيق العملي المباشر

تحدي الدرس الثالث: إضافة زر لمسح المدخلات

قم بالتعديل على الكود في المحرر أدناه:

أضف زراً جديداً بعنوان "مسح الحقل" أو "مسح 🗑️".
اربط الزر بالحدث onClick لاستدعاء setText('') لتصفير الحقل.
اختر لوناً مميزاً للزر (مثل الأحمر #dc2626).

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع