React omhyller native browser-events i et cross-browser-objekt kalt SyntheticEvent og bruker en enkelt listener på roten av appen til å sende events til dine handlers (event delegation). Du knytter bare handlers som props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) og tar en funksjon, ikke en streng (onClick={handleClick}, ikke onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Ikke kall funksjonen mens du rendrer — pakk den slik at den kjører på eventen, ikke umiddelbart:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Den andre linjen kaller remove(id) mens JSX bygges (hver render), som nesten aldri er det du vil.
For skjemaer, foretrekk onSubmit på <form> (med preventDefault) fremfor onClick på knappen, slik at Enter-tasten også fungerer.