React omslutter native browserevents i et cross-browser-objekt kaldet SyntheticEvent og bruger en enkelt listener i roden af appen til at sende events til dine handlere (event delegation). Du skal blot vedhæfte handlere som props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) og tager en funktion, ikke en streng (onClick={handleClick}, ikke onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Kald ikke funktionen under rendering — omslut den, så den køres ved eventet, ikke øjeblikkeligt:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Andenlinje kalder remove(id) under opbygning af JSX (ved hver rendering), hvilket næsten aldrig er det, du ønsker.
For formularer skal du foretrække onSubmit på <form> (med preventDefault) fremfor onClick på knappen, så Enter-tasten også fungerer.