React membungkus acara asli browser dalam objek lintas-browser yang disebut SyntheticEvent dan menggunakan satu pendengar di akar aplikasi untuk menghantar acara kepada pengendali Anda (event delegation). Anda hanya perlu melampirkan pengendali sebagai props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) dan mengambil fungsi, bukan rentetan (onClick={handleClick}, bukan onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Jangan panggil fungsi semasa rendering — balutnya supaya berjalan pada acara, bukan serta-merta:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Baris kedua memanggil remove(id) semasa membina JSX (setiap rendering), yang hampir tidak pernah apa yang anda mahukan.
Untuk borang, lebih suka onSubmit pada <form> (dengan preventDefault) daripada onClick pada butang, jadi kunci Masuk berfungsi juga.