React, yerel tarayıcı olaylarını SyntheticEvent adı verilen bir tarayıcı arası nesne içinde sarar ve işleyicilerinize olayları göndermek için uygulamanın kökünde tek bir dinleyici kullanır (olay delegasyonu). İşleyicileri yalnızca prop olarak eklersiniz.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) ve bir fonksiyon alırlar, string değil (onClick={handleClick}, onClick="handleClick()"değil).e.preventDefault(), e.stopPropagation(), e.target.Render ederken fonksiyonu çağırmayın — hemen değil, olay üzerine çalışacak şekilde sarın:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
İkinci satır, JSX'i oluştururken (her render) remove(id)'i çağırır, bu neredeyse hiçbir zaman istediğiniz şey değildir.
Fformlar için, düğmedeki onClick yerine <form>'daki onSubmit (preventDefault ile) tercih edin, böylece Enter tuşu da çalışır.