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) ஐ அழைக்கிறது (ஒவ்வொரு render), இது நீங்கள் விரும்புவது கிட்டத்தட்ட ஒருபோதும் இல்லை.
ফর্মகளுக்கு, பொத்தানில் onClick க்கு பதிலாக <form> இல் onSubmit (preventDefault உடன்) முன்னுரிமை கொடுங்கள், எனவே Enter விசை கூட செயல்படுகிறது.