React は native browser event を SyntheticEvent という cross-browser object で wrap し、app の root にある単一の listener から各 handler へ event を dispatch します（event delegation）。開発者は handler を props として付けるだけです。
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit）で、文字列ではなく関数を受け取ります（onClick={handleClick}。onClick="handleClick()" ではない）。e.preventDefault(), e.stopPropagation(), e.target。render 中に関数を呼び出してはいけません。event が発生したときに実行されるように wrap します。
<button onClick={() => remove(id)}>Delete</button> // ✅ click 時に実行される
<button onClick={remove(id)}>Delete</button> // ❌ render 中に実行される!
2 行目は JSX を構築している時点（毎 render）で remove(id) を呼び出します。ほとんどの場合、これは望ましくありません。
form では、button の onClick より <form> の onSubmit（preventDefault 付き）を優先します。そうすると Enter key でも動作します。