React مقامی براؤزر کی ایونٹس کو SyntheticEvent نام کے ایک براؤزر بھر میں آنے والی چیز میں لپیٹتا ہے اور اپنی جڑ میں ایک واحد سننے والے کا استعمال کرتے ہوئے آپ کی ہینڈلرز کو ایونٹس بھیجتا ہے (ایونٹ ڈیلیگیشن)۔ آپ صرف ہینڈلرز کو props کے طور پر منسلک کرتے ہیں۔
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) ہیں اور ایک فنکشن لیتے ہیں، string نہیں (onClick={handleClick}, onClick="handleClick()"نہیں).e.preventDefault(), e.stopPropagation(), e.target.Render کرتے وقت فنکشن کو کال نہ کریں — اسے لپیٹیں تاکہ یہ ایونٹ پر چلے، فوری نہیں:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
دوسری لائن JSX بناتے وقت (ہر render) remove(id) کو کال کرتی ہے، جو تقریباً کبھی بھی وہ نہیں ہے جو آپ چاہتے ہیں۔
فارمز کے لیے، بٹن پر onClick کی جگہ <form> پر onSubmit (preventDefault کے ساتھ) کو ترجیح دیں، تاکہ Enter کی بھی کام کرے۔