React avvolge gli eventi nativi del browser in un oggetto multipiattaforma chiamato SyntheticEvent e utilizza un singolo listener alla radice dell'app per inviare gli eventi ai tuoi gestori (delegazione degli eventi). Basta allegare i gestori come prop.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) e prendono una funzione, non una stringa (onClick={handleClick}, non onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Non chiamare la funzione durante il rendering — avvolgila in modo che venga eseguita sull'evento, non immediatamente:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
La seconda riga chiama remove(id) durante la creazione del JSX (ad ogni rendering), il che è quasi mai ciò che desideri.
Per i moduli, preferisci onSubmit su <form> (con preventDefault) a onClick sul pulsante, in modo che funzioni anche il tasto Invio.