React opakowuje natywne zdarzenia przeglądarki w obiekt cross-browser o nazwie SyntheticEvent i używa pojedynczego listenera w głównym węźle aplikacji do wysyłania zdarzeń do twoich handlerów (delegowanie zdarzeń). Po prostu przypisujesz handlery jako props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) i przyjmują funkcję, nie ciąg znaków (onClick={handleClick}, nie onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Nie wywoływuj funkcji podczas renderowania — opakuj ją tak, aby uruchomiła się na zdarzeniu, a nie natychmiast:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Druga linia wywołuje remove(id) podczas budowania JSX (każde renderowanie), co prawie nigdy nie jest tym, czego potrzebujesz.
W formularzach preferuj onSubmit na <form> (z preventDefault) zamiast onClick na przycisku, aby klawisz Enter również działał.