React নেটিভ ব্রাউজার ইভেন্টগুলিকে SyntheticEvent নামক একটি ক্রস-ব্রাউজার অবজেক্টে মোড়ায় এবং আপনার হ্যান্ডলারগুলিতে ইভেন্ট পাঠাতে অ্যাপের রুটে একটি একক লিসেনার ব্যবহার করে (ইভেন্ট ডেলিগেশন)। আপনি শুধুমাত্র হ্যান্ডলারগুলি 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!
দ্বিতীয় লাইনটি JSX তৈরি করার সময় remove(id) কল করে (প্রতিটি রেন্ডারে), যা আপনি প্রায় কখনও চান না।
ফর্মগুলির জন্য, বোতাম এর উপর onClick এর পরিবর্তে <form> এ onSubmit পছন্দ করুন (যেখানে preventDefault সহ), যাতে Enter কী ও কাজ করে।