Handling Events

شرح الأحداث في ريأكتHandling Events in Reactكورس React كاملالتفاعلية في ريأكتالأحداث التجميعية SyntheticEvent

جدول مرجعي سريع

التعامل مع الأحداث (Handling Events) وتمرير المعاملات في React

المفهوم الهندسي	الآلية البرمجية في React	النتيجة
الأحداث التجميعية SyntheticEvents	تغليف أحداث المتصفح الأصلية في غلاف موحد يعمل بنفس السلوك على جميع المتصفحات	ضمان استقرار المزايا التفاعلية في منصة نوفيل بغض النظر عن متصفح المستخدم
التسمية بصيغة CamelCase	كتابة اسم الحدث مثل onClick و onChange بدلاً من onclick العادية	التوافق الصارم مع معايير كتابة JSX داخل ريأكت
إرسال مرجع الدالة Function Reference	تمرير اسم الدالة بدون أقواس لضمان انتظار الحدث	منع تنفيذ الدالة تلقائياً أثناء رندرة الواجهة
تمرير المعاملات للحدث	استخدام دالة سهمية مجهولة	تمكين المطور من تمرير معرفات العناصر أو بيانات مخصصة مع الحدث بأمان تام

الشرح

في جافا سكريبت التقليدية (Vanilla JS)، كنا نربط الأحداث بالـ DOM عبر addEventListener أو نكتب onclick="handleClick()" في HTML.

في React، تختلف الآلية تماماً لضمان سرعة الأداء والتوافق المطلق بين المتصفحات المختلفة. تتعامل ريأكت مع الأحداث من خلال كائن ذكي يُسمى SyntheticEvent (الحدث التجميعي)، وهو غلاف موحد يغلف حدث المتصفح الأصلي ويعمل بنفس الطريقة بدقة على جميع المتصفحات.

1. الفروق الجوهرية لربط الأحداث في React

هناك قاعدتان صارمتان يجب مراعاتهما عند التعامل مع الأحداث داخل JSX:

صيغة CamelCase: تُكتب أسماء الأحداث بصيغة الجمل، مثل onClick بدلاً من onclick و onChange بدلاً من onchange.
تمرير مرجع الدالة (Function Reference): نمرر اسم الدالة بدون أقواس تنفيذ داخل الأقواس المجعدة {}.

onClick={handleClick} : صحيح (نمرر مرجع الدالة لتنتظر النقر).
onClick={handleClick()} : خاطئ (سيؤدي لتنفيذ الدالة فوراً أثناء رندرة المكون!).

2. تمرير المعاملات (Arguments) إلى الأحداث

في كثير من الأحيان، تحتاج لتمرير بيانات خاصة مع الحدث (مثل id الكورس المرادذ حذفه أو تعديله). لتمرير معامل دون تنفيذ الدالة فوراً أثناء الرندرة، نستخدم دالة سهمية غلافية (Arrow Function) احتضان للحدث:

نصائح احترافية

—عندما نكتب دالة سهمية داخل وسم JSX هكذا: onClick={() => handleEnroll(id)}، تقوم ريأكت بإنشاء نسخة جديدة تماماً من هذه الدالة في كل مرة يُعاد فيها رندرة المكون.
—في التطبيقات الصغيرة، لا يسبب هذا أي مشكلة ملموسة. ولكن إذا كانت لديك قائمة ضخمة تحتوي على ألف عنصر (1000 Items)، فإن إنشاء 1000 دالة جديدة مع كل رندرة يستهلك ذاكرة المتصفح ويثقل الأداء!
—الحل الاحترافي للمشاريع الضخمة:
—قم بإنشاء مكون فرعي مستقِل للعنصر (CourseItem) ومرر إليه الدالة الرئيسية مع المعرف كـ props، واجعل المكون الفرعي ينادي الدالة الداخلية بسهولة دون الحاجة لكتابة دوال سهمية مضمنة داخل الـ Loop!

الدرس السابق

Conditional Rendering

الدرس التالي

إدارة الحالة والتعرف على هوك useState

المفهوم الهندسي

الآلية البرمجية في React

النتيجة

الأحداث التجميعية SyntheticEvents

تغليف أحداث المتصفح الأصلية في غلاف موحد يعمل بنفس السلوك على جميع المتصفحات

ضمان استقرار المزايا التفاعلية في منصة نوفيل بغض النظر عن متصفح المستخدم

التسمية بصيغة CamelCase

كتابة اسم الحدث مثل onClick و onChange بدلاً من onclick العادية

التوافق الصارم مع معايير كتابة JSX داخل ريأكت

إرسال مرجع الدالة Function Reference

تمرير اسم الدالة بدون أقواس لضمان انتظار الحدث

منع تنفيذ الدالة تلقائياً أثناء رندرة الواجهة

تمرير المعاملات للحدث

استخدام دالة سهمية مجهولة

تمكين المطور من تمرير معرفات العناصر أو بيانات مخصصة مع الحدث بأمان تام

1. الفروق الجوهرية لربط الأحداث في React

هناك قاعدتان صارمتان يجب مراعاتهما عند التعامل مع الأحداث داخل JSX:

صيغة CamelCase: تُكتب أسماء الأحداث بصيغة الجمل، مثل onClick بدلاً من onclick و onChange بدلاً من onchange.

تمرير مرجع الدالة (Function Reference): نمرر اسم الدالة بدون أقواس تنفيذ داخل الأقواس المجعدة {}.

onClick={handleClick} : صحيح (نمرر مرجع الدالة لتنتظر النقر).

onClick={handleClick()} : خاطئ (سيؤدي لتنفيذ الدالة فوراً أثناء رندرة المكون!).

2. تمرير المعاملات (Arguments) إلى الأحداث