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!
दूसरी पंक्ति JSX बनाते समय remove(id) को कॉल करती है (हर रेंडर), जो लगभग कभी आप चाहते नहीं हैं।
फॉर्म्स के लिए, बटन पर onClick की बजाय <form> पर onSubmit को प्राथमिकता दें (preventDefault के साथ), ताकि Enter कुंजी भी काम करे।