JSX-এ ইভেন্ট সংযুক্তকরণ

আসুন এখন React-এ ইভেন্ট নিয়ে কাজ করা শিখি। উদাহরণস্বরূপ, আসুন একটি ব্লকে ক্লিক করলে কিছু টেক্সট সহ একটি alert প্রদর্শন করানো যাক।

ধরুন আমাদের একটি showMess ফাংশন আছে, যা একটি বার্তা সহ alert দেখায়, এবং HTML কোডে একটি বাটন আছে, যাতে ক্লিক করলে আমরা এই alertটি দেখতে চাই:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

আসুন আমাদের বাটনে onclick ইভেন্টটি সংযুক্ত করি যাতে এই ডিভে ক্লিক করলে showMess ফাংশনটি কার্যকর হয়। এর জন্য onClick অ্যাট্রিবিউটটি যোগ করতে হবে (অবশ্যই camelCase-এ, অর্থাৎ onClick, onclick নয়), এবং এতে সেই ফাংশনটি নির্দিষ্ট করতে হবে যা এই ইভেন্টে কার্যকর হবে:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

এইভাবেই ইভেন্ট নিয়ে কাজ করা হয়: একটি অ্যাট্রিবিউট যোগ করা হয় (উদাহরণস্বরূপ, onClick বা onFocus), অ্যাট্রিবিউটের মান হিসাবে সেই মেথডটি নির্দেশ করা হয় যা এই ইভেন্টে কল হবে।

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}