شرح صفوف ومحتوى الفقرة
يتمثل الخطأ الأكثر شيوعاً عند التعامل مع الأحداث في وضع قوسي الاستدعاء بجانب اسم الدالة داخل JSX. كتابة onClick={handleReset} تمرر مرجع الدالة ذاته لتحتفظ به React وتستدعيه عند النقر فقط، أما كتابة onClick={handleReset()} فتشغّل الدالة handleReset() فوراً لحظة رسم المكون ثم تسلّم ناتجها الفارغ undefined للزر فلا يستجيب لأي نقرة لاحقة.
تنطبق القاعدة ذاتها على الدوال المختصرة؛ إذ نكتب غلافاً سهمياً onClick={() => onNotify('Saved')} حتى نؤجل التنفيذ إلى لحظة النقر الفعلية.
HTML
function QuickActions({ onLog }) {
function handleArchive() {
onLog('Archived item on click!');
}
return (
<div className="rx-row">
<button onClick={handleArchive}>Archive</button>
<button onClick={() => onLog('Pin')}>Pin</button>
</div>
);
}