React omsluter inbyggda webbläsarhändelser i ett webläsarövergripande objekt som kallas SyntheticEvent och använder en enda lyssnare vid roten av appen för att skicka händelser till dina hanterare (event delegation). Du bifogar bara hanterare som props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) och tar en funktion, inte en sträng (onClick={handleClick}, inte onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Anropa inte funktionen under rendering — omslut den så att den körs på händelsen, inte omedelbar:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Den andra raden anropar remove(id) medan JSX byggs (vid varje rendering), vilket nästan aldrig är vad du vill.
För formulär föredrar du onSubmit på <form> (med preventDefault) framför onClick på knappen, så att Enter-tangenten också fungerar.