React înfășoară evenimentele native ale browserului într-un obiect cross-browser numit SyntheticEvent și folosește un singur listener la rădăcina aplicației pentru a trimite evenimentele toward handlerii dvs. (delegare de evenimente). Pur și simplu ataşați handlerii ca props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) și primesc o funcție, nu un string (onClick={handleClick}, nu onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Nu apelați funcția în timp ce redați — înfășurați-o pentru a se executa pe eveniment, nu imediat:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
A doua linie apelează remove(id) în timp ce construiește JSX (la fiecare redare), ceea ce aproape niciodată nu este ceea ce doriți.
Pentru formulare, preferați onSubmit pe <form> (cu preventDefault) în loc de onClick pe buton, pentru ca tasta Enter să funcționeze și ea.