React zabaluje nativní events prohlížeče do objektu kompatibilního s více prohlížeči s názvem SyntheticEvent a používá jeden listener v kořenu aplikace k odeslání events vašim handlery (event delegation). Stačí připojit handlery jako props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) a přijímají funkci, ne řetězec (onClick={handleClick}, ne onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Nevyvolávejte funkci během renderování — zabalte ji tak, aby se spustila při eventu, ne okamžitě:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Druhý řádek volá remove(id) při vytváření JSX (při každém renderování), což je téměř nikdy to, co chcete.
Pro formuláře preferujte onSubmit na <form> (s preventDefault) před onClick na tlačítku, aby fungovala i klávesa Enter.