React ਨੇਟਿਵ ਬ੍ਰਾਊਜ਼ਰ events ਨੂੰ SyntheticEvent ਨਾਮ ਦੀ ਇੱਕ cross-browser ਵਸਤੂ ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ ਅਤੇ ਐਪ ਦੇ ਰੂਟ ਤੇ ਇੱਕ ਸਿੰਗਲ listener ਦੀ ਵਰਤੋਂ ਕਰਕੇ events ਨੂੰ ਤੁਹਾਡੇ handlers ਵਿੱਚ ਭੇਜਦਾ ਹੈ (event delegation)। ਤੁਸੀਂ ਸਿਰਫ handlers ਨੂੰ props ਵਜੋਂ attach ਕਰਦੇ ਹੋ।
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) ਅਤੇ ਇੱਕ ਫੰਕਸ਼ਨ ਲੈਂਦੇ ਹਨ, ਸਟ੍ਰਿੰਗ ਨਹੀਂ (onClick={handleClick}, onClick="handleClick()" ਨਹੀਂ)।e.preventDefault(), e.stopPropagation(), e.target।Render ਦਰਮਿਆਨ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਨਾ ਕਰੋ — ਇਸਨੂੰ ਲਪੇਟੋ ਤਾਂ ਜੋ ਇਹ event ਤੇ ਚੱਲੇ, ਤੁਰੰਤ ਨਹੀਂ:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
ਦੂਜੀ ਲਾਈਨ remove(id) ਨੂੰ JSX ਬਣਾਉਂਦਿਆਂ (ਹਰ render) ਕਾਲ ਕਰਦੀ ਹੈ, ਜੋ ਲਗਭਗ ਕਦੇ ਤੁਹਾਡੀ ਜ਼ਰੂਰਤ ਨਹੀਂ।
Form ਲਈ, button ਤੇ onClick ਦੀ ਥਾਂ <form> ਤੇ onSubmit (ਜਿਸ ਵਿੱਚ preventDefault ਹੋ) ਵਿਚਕਾਰ ਤਰਜੀਹ ਦਿਓ, ਤਾਂ ਜੋ Enter key ਵੀ ਕੰਮ ਕਰੇ।