Το React περιλαμβάνει τα native συμβάντα προγράμματος περιήγησης σε ένα αντικείμενο συμβατό με πολλά προγράμματα περιήγησης που ονομάζεται SyntheticEvent και χρησιμοποιεί έναν ενιαίο ακροατή στη ρίζα της εφαρμογής για να προωθήσει συμβάντα στους χειριστές σας (event delegation). Απλώς επισυνάπτεις χειριστές ως props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) και λαμβάνουν μια συνάρτηση, όχι ένα string (onClick={handleClick}, όχι onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Μην καλέσεις τη συνάρτηση κατά τη διάρκεια της απόδοσης — περιτύλιξέ την ώστε να τρέχει στο συμβάν, όχι αμέσως:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Η δεύτερη γραμμή καλεί remove(id) κατά τη δημιουργία του JSX (σε κάθε απόδοση), το οποίο είναι σχεδόν ποτέ αυτό που θέλεις.
Για φόρμες, προτίμησε onSubmit στη <form> (με preventDefault) έναντι του onClick στο κουμπί, ώστε να λειτουργεί και το πλήκτρο Enter.