React ახვევს ნატიური ბრაუზერის ღვენტებს cross-browser ობიექტში სახელწოდებით SyntheticEvent და იყენებს ერთ მსმენელს აპლიკაციის ფესვში ღვენტების დისპეტჩეროთ თქვენი ხელმისაწვდომებამდე (event delegation). თქვენ მხოლოდ უნდა მიამაგროთ ხელმისაწვდომები როგორც props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) და ღებულობენ ფუნქციას, არა სტრიქონს (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 ღილაკიც მუშაობდეს.