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 కీ కూడా పనిచేస్తుంది.