রিয়াক্ট আমাদের ইভেন্ট হ্যন্ডেল করার সিস্টেম দিয়ে দিয়েছে। ইভেন্ট হ্যান্ডেলার হলো মূলত যখন কোন ইভেন্ট ট্রিগার হয়, যেমন ঃ ক্লিক,হভার,ফোকাস এসব।

Adding Event Handler to JSX

রিয়াক্টে আমরা দুটি স্টেপে Event Handler এড করতে পারিঃ

export default function Button(){
 
    function handleClick(){ // এখনে handleClick নামে একটা হ্যন্ডেলার ফাংশন ডিক্লেয়ার করা হয়েছে এবং তার ভিতরে লজিক ইমপ্লিমেন্ট করা হয়েছে।
        alert("বাটনে ক্লিক করা হয়েছে");
    }
 
}
 

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

এছাড়াও আমরা JSX এর ইনলাইনেও Event Handler ফাংশন এড করতে পারি ।

যেমনঃ

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

অথবা আরও ছোট করেও লিখতে পারি Arrow Function এর সিনট্যাক্সেঃ

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

এখানে একটি ফাংশন ডিফাইন করা হয়েছে handleClick নামে এবং তা button এলিমেন্টে as a props পাস করা হয়েছে । handleClick ফাংশনটি একটা event handler ফাংশন।

Reading Props in Event Handler

ইভেন্ট হ্যান্ডেলারগুলো যেহেতু কম্পোনেন্টের ভিতরে লেখা হয় তাই কম্পোনেন্টের যেসব প্রপস আছে তা event handler functionগুলো সরাসরি এক্সেস করতে পারে ।

Pass Event Handler to Child Components as Props

কখনো কখনো আমাদের প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্ট এর ইভেন্ট কে ম্যানেজ করা লাগে। সেই ক্ষেত্রে প্যারেন্ট কম্পোনেন্টে event handler function ডিফাইন করে তা প্রপস আকারে চাইল্ড কম্পোনেন্টে পাস করা যায়।

চলুন একটু বিস্তারিত বুঝিঃ

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 কম্পোনেন্ট। এবং মুভিকার্ড কম্পোনেন্ট এ একটা প্রপ্স পাস করা হয়েছে onPlay নামে। এই onPlay প্রপস এর মাধ্যমে মূলত handlePlay নামক একটা ইভেন্ট হ্যান্ডেলার পাস করা হয়েছে ।

চাইল্ড কম্পোনেন্ট MovieCard সেই প্রপস টাকে রিসিভ করেছে এবং বাটনের onClick এ তা ট্রিগার করা হয়েছে।

তার মানে হলো চাইল্ড কম্পোনেন্ট MovieCard এর বাটনে ক্লিক হলে কোন হ্যন্ডেলার ফাংশন কল হবে তা আমরা প্যারেন্ট কম্পোনেন্টেই ডিফাইন করতে পারি এবং তা প্রপস আকারে পাঠাতে পারি ।

Naming Conventions of event handler props