React ले नेटिभ ब्राउजर इभेन्टहरूलाई SyntheticEvent नामक क्रस-ब्राउजर अब्जेक्टमा र्याप गर्छ र अनुप्रयोगको मूलमा एकल श्रोता प्रयोग गर्छ तपाईंको ह्यान्डलरहरूमा इभेन्टहरू पठाउन (event delegation)। तपाईंले केवल ह्यान्डलरहरूलाई 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 कुञ्जी पनि काम गरोस्।