React ห่อเหตุการณ์เบราว์เซอร์แบบเนทีฟในออบเจ็กต์ข้ามเบราว์เซอร์ที่เรียกว่า SyntheticEvent และใช้ listener เดียวที่รากของแอปเพื่อจัดส่งเหตุการณ์ไปยัง handler ของคุณ (event delegation) คุณเพียงแค่แนบ handler เป็น props
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) และใช้ function ไม่ใช่ string (onClick={handleClick} ไม่ใช่ onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.อย่าเรียกฟังก์ชันขณะที่ render — ห่อมันเพื่อให้ทำงานในเหตุการณ์ ไม่ใช่ทันที:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
บรรทัดที่สองเรียก remove(id) ขณะสร้าง JSX (ทุกครั้ง render) ซึ่งแทบจะไม่เคยเป็นสิ่งที่คุณต้องการ
สำหรับฟอร์ม ควรเลือก onSubmit บน <form> (พร้อมกับ preventDefault) มากกว่า onClick บนปุ่ม เพื่อให้ปุ่ม Enter ใช้งานได้เช่นกัน