React enveloppe les événements natifs du navigateur dans un objet compatible entre les navigateurs appelé SyntheticEvent et utilise un seul listener à la racine de l'application pour envoyer les événements à vos gestionnaires (event delegation). Vous attachez simplement les gestionnaires en tant que props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) et prennent une fonction, pas une chaîne (onClick={handleClick}, pas onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.N'appelez pas la fonction lors du rendu — enveloppez-la pour qu'elle s'exécute à l'événement, pas immédiatement :
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
La deuxième ligne appelle remove(id) lors de la création du JSX (à chaque rendu), ce qui n'est presque jamais ce que vous voulez.
Pour les formulaires, préférez onSubmit sur le <form> (avec preventDefault) plutôt que onClick sur le bouton, pour que la touche Entrée fonctionne aussi.