ReactJS-এ, ইভেন্ট হ্যান্ডলার সাধারণত JavaScript ইভেন্ট সিস্টেমের মতোই কাজ করে, তবে React তার নিজস্ব ইভেন্ট সিস্টেম ব্যবহার করে। React-এর ইভেন্ট সিস্টেমটি SyntheticEvent নামে পরিচিত এবং এটি ব্রাউজারের native ইভেন্টগুলোর ওপর একটি wrapper হিসেবে কাজ করে। এই SyntheticEvent ইভেন্ট সিস্টেমটি React-কে বিভিন্ন ব্রাউজার এবং প্ল্যাটফর্মের মধ্যে কনসিসটেন্ট ইভেন্ট হ্যান্ডলিংয়ের সুযোগ দেয়।
ReactJS-এ, ইভেন্ট হ্যান্ডলার ফাংশনটি সাধারণত একটি ইভেন্ট অবজেক্ট গ্রহণ করে, যা ইভেন্টের সাথে সম্পর্কিত তথ্য ধারণ করে। এটি আপনাকে ইভেন্ট সম্পর্কে বিস্তারিত তথ্য যেমন, কোন ইলিমেন্টে ইভেন্ট ঘটেছে, কী ধরনের ইভেন্ট, ইভেন্টের টাইমস্ট্যাম্প ইত্যাদি জানতে সহায়তা করে।
ReactJS-এ ইভেন্ট হ্যান্ডলার
ReactJS-এ ইভেন্ট হ্যান্ডলিং সিস্টেমটি JavaScript এর সাধারণ DOM ইভেন্ট হ্যান্ডলিং থেকে কিছুটা আলাদা। React-এ ইভেন্ট হ্যান্ডলারের নামগুলো ক্যামেলকেস (camelCase) স্টাইলে থাকে এবং ইভেন্ট হ্যান্ডলারগুলো সাধারণত ফাংশন হিসেবে পাস করা হয়।
উদাহরণ:
import React from 'react';
function Button() {
const handleClick = (event) => {
console.log('Button clicked!');
console.log(event);
};
return <button onClick={handleClick}>Click Me</button>;
}
export default Button;
এখানে, handleClick একটি ইভেন্ট হ্যান্ডলার, যা event অবজেক্টকে আর্গুমেন্ট হিসেবে গ্রহণ করছে। যখন বাটনটিতে ক্লিক করা হবে, তখন ইভেন্ট অবজেক্টটি কনসোলে লগ করা হবে।
Event Object এর বৈশিষ্ট্য
React-এ, SyntheticEvent হল ইভেন্ট অবজেক্ট যা অনেক ব্রাউজারের native ইভেন্টগুলোর ওপর একটি wrapper হিসেবে কাজ করে। এটি কিছু বিশেষ বৈশিষ্ট্য প্রদান করে, যেমন:
১. target:
target হলো সেই DOM ইলিমেন্ট যেটিতে ইভেন্টটি ঘটেছে। এটি ইভেন্ট এর মাধ্যমে যে উপাদানটির সাথে ইন্টারঅ্যাকশন করা হয়েছে, তার সম্পর্কে বিস্তারিত তথ্য প্রদান করে।
উদাহরণ:
const handleClick = (event) => {
console.log(event.target); // যে বাটনটি ক্লিক করা হয়েছে সেটি
};
২. currentTarget:
currentTarget হলো সেই ইলিমেন্ট, যেটি ইভেন্ট হ্যান্ডলারের সাথে সংযুক্ত (এই ইভেন্টটি যেই ইলিমেন্টে ঘটেছে, সেই ইলিমেন্টের ভ্যালু পাওয়া যাবে)।
উদাহরণ:
const handleClick = (event) => {
console.log(event.currentTarget); // যে বাটনটি ইভেন্ট হ্যান্ডলারের সাথে সংযুক্ত
};
৩. type:
type প্রপার্টি ইভেন্টের ধরন প্রদান করে, যেমন click, keydown, submit ইত্যাদি।
উদাহরণ:
const handleClick = (event) => {
console.log(event.type); // 'click'
};
৪. preventDefault():
preventDefault() ফাংশনটি ডিফল্ট ব্রাউজার আচরণ (যেমন ফর্ম সাবমিট হওয়ার সময় পেজ রিলোড) বন্ধ করতে ব্যবহৃত হয়। এটি ইভেন্টের ডিফল্ট একশনকে বাধা দেয়।
উদাহরণ:
const handleSubmit = (event) => {
event.preventDefault(); // ফর্ম সাবমিটের সময় পেজ রিলোড বন্ধ করবে
console.log('Form Submitted');
};
৫. stopPropagation():
stopPropagation() ফাংশনটি ইভেন্টের বুবলিং (বাবল) রোধ করে, যার মাধ্যমে ইভেন্টটি অন্য কম্পোনেন্টে প্রপাগেট হতে বাধা দেয়। এটি সাধারণত ইভেন্ট বুবলিং নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
উদাহরণ:
const handleClick = (event) => {
event.stopPropagation(); // ইভেন্ট বুবলিং বন্ধ করবে
console.log('Button clicked');
};
ReactJS-এ ইভেন্ট হ্যান্ডলিংয়ের মূল পদ্ধতি
ReactJS-এ ইভেন্ট হ্যান্ডলিংকে আরও সহজ ও কার্যকর করতে কিছু গুরুত্বপূর্ণ বিষয় মনে রাখতে হয়:
- Event Binding: React ইভেন্ট হ্যান্ডলারের সাথে ইভেন্ট অবজেক্টকে সরাসরি বাইনড করা হয় না, এটি স্বয়ংক্রিয়ভাবে ইভেন্ট অবজেক্ট পাস করে।
- Arrow Functions: ইভেন্ট হ্যান্ডলারের মধ্যে
thisএর প্রপারলি কাজ করার জন্য সাধারণত অ্যারো ফাংশন ব্যবহার করা হয়।
উদাহরণ:
import React, { Component } from 'react';
class MyComponent extends Component {
constructor() {
super();
this.state = { count: 0 };
}
handleClick = (event) => {
console.log('Button clicked', event);
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<button onClick={this.handleClick}>Click Me</button>
<p>Clicked {this.state.count} times</p>
</div>
);
}
}
export default MyComponent;
এখানে, handleClick একটি অ্যারো ফাংশন হিসেবে ডিফাইন করা হয়েছে, যাতে this সঠিকভাবে কাজ করে এবং State পরিবর্তন করা যায়।
সারাংশ
ReactJS-এ ইভেন্ট অবজেক্ট (যা SyntheticEvent নামে পরিচিত) ইভেন্টের সঙ্গে সম্পর্কিত সব তথ্য ধারণ করে এবং এর মাধ্যমে আপনি ইভেন্টের ধরন, লক্ষ্য, টাইপ, এবং অন্যান্য আচরণ নিয়ন্ত্রণ করতে পারেন। ReactJS-এ ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি কম্পোনেন্টের ইন্টারঅ্যাকশন এবং UI আপডেটগুলি আরও ডাইনামিক ও কার্যকরভাবে নিয়ন্ত্রণ করতে পারেন।
Read more
