React käärii natiivit selaintapahtumat selainten välille yhteensopivaksi objektiksi nimeltä SyntheticEvent ja käyttää yhtä kuuntelijaa sovelluksen juuressa tapahtumien välittämiseen käsittelijöihisi (event delegation). Sinun tarvitsee vain liittää käsittelijät propseiksi.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) ja ottavat funktion, ei merkkijonoa (onClick={handleClick}, ei onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Älä kutsu funktiota renderöinnin aikana — kääri se niin, että se suoritetaan tapahtumassa, ei heti:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
Toinen rivi kutsuu remove(id):ia JSX:n rakentamisen aikana (jokaisessa renderöinnissä), mikä on lähes koskaan se, mitä haluat.
Lomakkeiden osalta suosi onSubmit:ia <form>:ssa (preventDefault:illä) onClick:in sijaan painikkeella, jotta Enter-näppäin toimii myös.
Kirjasto IT-haastattelukysymyksiä yksityiskohtaisine vastauksineen — Juniorista Senioriin.
Lahjoita