يقوم React بتغليف أحداث المتصفح الأصلية في كائن عابر للمتصفحات يسمى SyntheticEvent ويستخدم مستمع واحد في جذر التطبيق لإرسال الأحداث إلى معالجاتك (تفويض الأحداث). ما عليك سوى إرفاق المعالجات كخصائص (props).
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرعonClick, onChange, onSubmit) وتأخذ دالة، وليس سلسلة نصية (onClick={handleClick}, وليس onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.لا تستدع الدالة أثناء العرض — غلفها حتى تعمل عند حدوث الحدث، وليس فوراً:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
السطر الثاني يستدعي remove(id) أثناء بناء JSX (في كل عرض)، وهو ما تريده نادراً جداً.
للنماذج، فضّل onSubmit على <form> (مع preventDefault) بدلاً من onClick على الزر، حتى يعمل مفتاح Enter أيضاً.