A React az eredeti böngészőeseményeket egy SyntheticEvent nevű böngészőközi objektumba csomagolja, és az alkalmazás gyökerénél egyetlen figyelőt használ az események az Ön kezelőihez való továbbítására (eseménydelegálás). Egyszerűen csatlakoztassa a kezelőket tulajdonságokként.
jsx
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
Főbb pontok
- A kezelők camelCase tulajdonságok (
onClick,onChange,onSubmit) és egy függvényt vesznek fel, nem karakterláncot (onClick={handleClick}, nemonClick="handleClick()"). - A SyntheticEvent ugyanaz az API-ja, mint az eredeti eseményeknek:
e.preventDefault(),e.stopPropagation(),e.target.
Argumentumok átadása
Ne hívja meg a függvényt a renderelés során — csomagolja be, hogy az eseményen fusson, ne azonnal:
jsx
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
A második sor a remove(id) értékeket hívja meg a JSX építésekor (minden rendereléskor), ami szinte soha nem az, amit szeretne.
Miért teszi ezt a React
- Egyetlen gyökerslушатель ezer egyedi DOM-figyelő helyett → kevesebb memória és következetes viselkedés.
- Böngészőközi normalizálás így nem kell böngészőspecifikus kódot írnia.
Az űrlapok esetében a gomb onClick helyett a <form> (preventDefault segítségével) onSubmit értékét részesítse előnyben, hogy az Enter billentyű is működjön.