রিয়াক্টের ইভেন্ট হ্যান্ডেলার কী এবং কিভাবে কাজ করে?

রিয়াক্টে ইভেন্ট হ্যান্ডেলার হলো সেই ফাংশনগুলো যেগুলো কোনো নির্দিষ্ট ইভেন্ট ঘটলে ট্রিগার হয়। ইভেন্ট বলতে বোঝায় যে, ইউজার কোনো নির্দিষ্ট কাজ করলো যেমন ক্লিক, মাউস নিয়ে গেলো, ফোকাস করলো ইত্যাদি। যখন এসব ইভেন্ট ঘটে, তখন ইভেন্ট হ্যান্ডেলার ফাংশন কল হয় এবং সেই অনুযায়ী কিছু কাজ (লজিক) সম্পন্ন হয়। এই পুরো প্রক্রিয়াটা রিয়াক্টের একটি গুরুত্বপূর্ণ অংশ।

Adding Event Handler to JSX

রিয়াক্টে ইভেন্ট হ্যান্ডেলার যোগ করা দুটি ধাপে করা যায়। প্রথম ধাপে তুমি ফাংশনটি ডিক্লেয়ার করবে এবং এতে কিছু লজিক ইমপ্লিমেন্ট করবে। এরপর, দ্বিতীয় ধাপে, সেই ফাংশনটি উপযুক্ত ইলিমেন্ট যেমন button এর সাথে যুক্ত করবে।

export default function Button() {
  function handleClick() {
    // এখানে handleClick ফাংশনটি ডিক্লেয়ার করা হলো এবং এলার্ট দেখানোর লজিক যোগ করা হলো
    alert("বাটনে ক্লিক করা হয়েছে");
  }
}

export default function Button() {
  function handleClick() {
    alert("বাটনে ক্লিক করা হয়েছে");
  }
 
  return (
    <button onClick={handleClick}>Click Me</button> // এখানে onClick এর ভেতরে handleClick ফাংশন পাস করা হয়েছে
  );
}

Inline Event Handler ব্যবহার করা:

রিয়াক্টে তুমি ইভেন্ট হ্যান্ডেলারকে সরাসরি JSX কোডের ভেতরেও ডিফাইন করতে পারো। যেমন, ফাংশনকে আলাদা করে লিখে রাখা না লাগলেও চলে। ইনলাইন ফাংশনও একইভাবে কাজ করবে, তবে কোড আরও ছোট এবং সরাসরি বাটনের ভেতরেই থাকবে।

export default function Button() {
  return (
    <button
      onClick={function () {
        alert("বাটনে ক্লিক করা হয়েছে");
      }}
    >
      Click Me
    </button>
  );
}

Arrow Function দিয়ে Event Handler লেখা:

আরও সংক্ষিপ্তভাবে লিখতে পারো arrow function দিয়ে। এইভাবে কোডটা আরও ছোট হয়, এবং সিম্পল দেখায়:

export default function Button() {
  return (
    <button onClick={() => alert("বাটনে ক্লিক করা হয়েছে")}>Click Me</button>
  );
}

এখানে onClick এর ভেতরেই ফাংশনটি ডিফাইন করা হয়েছে, এবং সেটা arrow function ব্যবহার করে লেখা হয়েছে।

Reading Props in Event Handler

রিয়াক্টে ইভেন্ট হ্যান্ডলার ফাংশনগুলো যেহেতু কম্পোনেন্টের ভেতরে থাকে, সুতরাং তুমি সহজেই প্রপস অ্যাক্সেস করতে পারো। যখন তুমি একটি ইভেন্ট হ্যান্ডলার ফাংশন ডিক্লেয়ার করো, সেই ফাংশনটি প্রপস থেকে যেকোনো ডেটা অ্যাক্সেস করতে পারবে।

Pass Event Handler to Child Components as Props

অনেক সময় তোমার প্রয়োজন পড়বে প্যারেন্ট কম্পোনেন্ট থেকে ইভেন্ট হ্যান্ডলারকে চাইল্ড কম্পোনেন্টে পাঠানোর। এই অবস্থায়, প্যারেন্ট কম্পোনেন্টে ইভেন্ট হ্যান্ডলার ফাংশন ডিফাইন করে সেটিকে চাইল্ড কম্পোনেন্টে প্রপস আকারে পাঠানো যায়।

এখন একটু উদাহরণ দেখি:

export default function App() {
  function handlePlay() {
    alert("Movie is playing");
  }
  return <MovieCard onPlay={handlePlay} />;
}

export default function MovieCard({ onPlay }) {
  return <button onClick={onPlay}>Play</button>;
}

এখানে, App কম্পোনেন্ট একটি প্যারেন্ট কম্পোনেন্ট এবং এর চাইল্ড হলো MovieCard। App কম্পোনেন্টে একটি ইভেন্ট হ্যান্ডলার ফাংশন handlePlay ডিফাইন করা হয়েছে। এরপর সেটি onPlay নামে প্রপস হিসেবে MovieCard কম্পোনেন্টে পাঠানো হয়েছে। যখন MovieCard এর বাটনে ক্লিক হবে, onPlay প্রপসটি ট্রিগার হবে, আর সেটি handlePlay ফাংশনটি কল করবে।

Naming Conventions of Event Handler Props