Event Parameters وسائط الحدث
آخر تحديث: 2026-11-03
Event Parameters وسائط الحدث
تستقبل دالة معالجة الحدث كائن الحدث e وتستطيع قراءة قيم مثل target.value أو key منه. وحين يلزم تمرير وسائط إضافية، لُفّ الاستدعاء في دالة سهمية — onClick={() => fn(id)} — لأن كتابة fn(id) ستنفّذها أثناء العرض. ومنذ React 17 لم يعد React يجمّع كائنات الأحداث، فبإمكانك الاحتفاظ بواحدة وقراءتها لاحقاً بأمان.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
onChange={(e) => setName(e.target.value)} // e: كائن الحدث
onClick={() => remove(id)} // وسائط إضافية: لُفّها في دالة سهمية
onClick={(e) => remove(id, e)} // الوسائط وكائن الحدث معاً⚙️ المعاملات
| e (event object) | كائن الحدث المُركَّب في React؛ تقرأ e.target.value القيمة الحالية لحقل الإدخال، ويخبرك e.type بنوع الحدث الذي وقع. |
|---|
القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
ثلاثة أزرار بألوان؛ الضغط على أحدها يسجّل «Picked #xxxxxx (event type: click)» أسفل، الأحدث أولاً وبحد أقصى ثلاثة إدخالات — عرض لتمرير وسائط مخصّصة إلى معالج الحدث.💡 النقاط الأساسية
💡 نصيحة اكتب () => fn(x) لتمرير الوسائط؛ فكتابة fn(x) مباشرة تنفّذها أثناء العرض — وهو أشيع خلل عند تمرير وسائط الأحداث.
ℹ️ ملاحظة أكثر الخصائص استخداماً هما e.target.value (القيمة الحالية لحقل الإدخال) و e.key (المفتاح الذي ضُغط في أحداث لوحة المفاتيح).
ℹ️ ملاحظة منذ React 17 لم تعد كائنات الأحداث مجمَّعة، فبإمكانك حفظ واحدة أو قراءتها بشكل غير متزامن من دون استدعاء e.persist().
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أمرّر وسائط إلى onClick؟
ج غلّف الاستدعاء في دالة سهمية: onClick={() => remove(id)}؛ وإذا احتجت كائن الحدث أيضاً فاكتب onClick={(e) => remove(id, e)}.
س ما خصائص كائن الحدث e الأكثر استخداماً؟
ج e.target (العنصر الذي أطلق الحدث، ويُدمج غالباً مع .value لقراءة الإدخال)، و e.type (نوع الحدث)، و e.key (مفتاح لوحة المفاتيح)، و e.clientX/Y (موضع الماوس).
س أستخدم الدوال السهمية أم bind لتمرير الوسائط؟
ج الكود الحديث يستخدم الدوال السهمية دائماً؛ فهي أوضح في القراءة. أما bind فهو الأسلوب الأقدم بالنتيجة نفسها لكن القراءة أسوأ، فلا تحتاجه في المشاريع الجديدة.
