React verpakt native browser events in een cross-browser object genaamd SyntheticEvent en gebruikt een enkele listener aan de root van de app om events naar uw handlers te verzenden (event delegation). U hoeft alleen handlers als props toe te voegen.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
DonerenonClick, onChange, onSubmit) en nemen een function, geen string (onClick={handleClick}, niet onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Roep de function niet aan tijdens rendering — verpak deze zodat deze op het event wordt uitgevoerd, niet onmiddellijk:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
De tweede regel roept remove(id) aan tijdens het bouwen van de JSX (elke render), wat bijna nooit is wat u wilt.
Voor formulieren geeft u de voorkeur aan onSubmit op de <form> (met preventDefault) boven onClick op de knop, zodat de Enter-toets ook werkt.