معالجة الأحداث: onClick وonChange

الهدف: عالج النقرات وتغييرات النص باستخدام الأحداث الاصطناعية في React للحصول على سلوك متسق عبر المتصفحات.

• يُشغّل onClick الإجراءات
• يقرأ onChange قيم الإدخال
• يحمل كائن الحدث التفاصيل

اربط معالجًا: onClick={handle}. اجعل الدوال قصيرة؛ وحدّث الحالة باستخدام دوال التعيين، وفضّل دالة التحديث الوظيفية عند استخدام القيمة السابقة.

يُطلَق onChange عندما يعدّل المستخدم حقل إدخال. اقرأ النص من event.target.value واجعل الحالة المصدر الوحيد للحقيقة.

عرض توضيحي: زِد القيمة عند النقر، وطابِق قيمة الإدخال باستخدام onChange، وامنع إعادة تحميل الصفحة عند إرسال النموذج باستخدام event.preventDefault().

تغلّف الأحداث الاصطناعية الأحداث الأصلية لتوفير سلوك متسق. اقرأ القيم داخل المعالج، واجعل المعالجات قصيرة ومركّزة.

• استخدم event.preventDefault() للنماذج
• استخدم event.target.value لحقول الإدخال

نصائح:

• لا تعدّل DOM مباشرة؛ دع الحالة تقود واجهة المستخدم.
• تجنب المنطق المعقد داخل المعالجات؛ واستدعِ دوال صغيرة بدلًا منه.
• استخدم دالة التحديث الوظيفية عند استخدام الحالة السابقة.

مراجعة: استخدم onClick للإجراءات وonChange لحقول الإدخال؛ واقرأ القيم من event.target.value؛ وامنع إعادة تحميل النموذج الافتراضية عند الحاجة.