React umhüllt native Browser-Events in einem browserneutralisierten Objekt namens SyntheticEvent und verwendet einen einzelnen Listener in der Wurzel der App, um Events an deine Handler weiterzuleiten (Event Delegation). Du musst einfach Handler als Props anhängen.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) und benötigen eine Funktion, keinen String (onClick={handleClick}, nicht onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Ruf die Funktion nicht während des Renderings auf — verpacke sie, damit sie beim Event ausgeführt wird, nicht sofort:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Die zweite Zeile ruft remove(id) beim Erstellen des JSX auf (bei jedem Rendering), was fast nie das ist, was du möchtest.
Bei Formularen bevorzuge onSubmit auf dem <form> (mit preventDefault) gegenüber onClick auf dem Button, damit die Enter-Taste auch funktioniert.