React bọc các sự kiện gốc của trình duyệt trong một đối tượng đa-trình-duyệt gọi là SyntheticEvent và dùng một listener duy nhất ở gốc của app để phân phối sự kiện tới các handler của bạn (event delegation). Bạn chỉ gắn handler dưới dạng props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) và nhận một hàm, không phải chuỗi (onClick={handleClick}, không phải onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Đừng gọi hàm khi đang render — hãy bọc nó để nó chạy khi có sự kiện, không phải ngay lập tức:
<button onClick={() => remove(id)}>Delete</button> // ✅ chạy khi click
<button onClick={remove(id)}>Delete</button> // ❌ chạy lúc render!
Dòng thứ hai gọi remove(id) trong khi dựng JSX (mỗi lần render), điều gần như không bao giờ bạn muốn.
Với form, ưu tiên onSubmit trên <form> (với preventDefault) hơn onClick trên nút, để phím Enter cũng hoạt động.