Event Handling معالجة الأحداث
آخر تحديث: 2026-11-03
Event Handling معالجة الأحداث
يربط React الأحداث بخصائص onXxx بصيغة camelCase الصغيرة مثل onClick وonChange، وقيمة هذه الخاصية دالة. وعند إطلاق الحدث تقرأ دالة المعالجة عادةً المُدخل أو تستدعي setState لتستجيب الواجهة لفعل المستخدم — وهو النمط الأساسي وراء كل مكوّن تفاعلي. واختيار التسمية مقصود: سمات DOM صغيرة، وخصائص React camelCase.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
<button onClick={() => setCount(count + 1)}>+1</button>
// ↑ اسم الحدث بصيغة camelCase ↑ مرّر الدالة نفسها لا ناتج استدعائها⚙️ المعاملات
| onXxx (handler) | دالة تستقبل كائن الحدث المُركَّب؛ يمكن أن تكون دالة سهمية مضمّنة أو دالة handleXxx معرَّفة داخل المكوّن. |
|---|
القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تعرض الصفحة عدد إعجابات وثلاثة أزرار وسطر رسالة وحقل إدخال: «Like» يزيد الرقم، و«Show a message» يطبع نصه، والكتابة في الحقل تُعاد لحظياً أسفله، و«Reset» يمسح كل شيء.💡 النقاط الأساسية
⚠️ تحذير onClick={fn()} ينفّذ الدالة أثناء العرض ويستخدم قيمة عودتها معالجاً — مرّر الدالة نفسها بدلاً من ذلك: onClick={fn} أو () => fn().
💡 نصيحة انقل المعالجات المعقّدة إلى جسم المكوّن كدوال handleXxx مسمّاة؛ واترك الدوال السهمية المضمّنة للحالات التي تتّسع في سطر واحد.
ℹ️ ملاحظة أحداث React أحداث مُركَّبة (SyntheticEvent)، توحّد فروق المتصفحات وتتصرّف تقريباً مثل الأحداث الأصلية.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أربط حدث نقر في React؟
ج اكتب onClick={handler} على العنصر باسم حدث بصيغة camelCase؛ ويمكن أن يكون المعالج دالة معرَّفة داخل المكوّن أو دالة سهمية مضمّنة.
س لماذا يجب أن يكون onClick دالة سهمية؟
ج يحتاج onClick إلى دالة تُستدعى عند وقوع الحدث. كتابة fn() تنفّذها فوراً أثناء العرض؛ أما () => fn() فتؤجّلها حتى النقر.
س ما الفرق بين أحداث React والأحداث الأصلية؟
ج تستخدم React أحداثاً مُركَّبة: أسماء camelCase، وغلاف موحّد لكائن الحدث الأصلي، وتفويض مثبَّت على العقدة الجذر — ما يحسّن التوافق والأداء معاً.
