ReactJS এ Event Handling এর নিয়ম

ReactJS-এ Event Handling হল ইউজার ইন্টারঅ্যাকশন যেমন ক্লিক, কিবোর্ড ইনপুট, মাউস মুভমেন্ট ইত্যাদি ট্র্যাক করার একটি পদ্ধতি। React-এ event handling বেশ কিছু নিয়ম এবং ভিন্ন পদ্ধতিতে কাজ করে, যা সাধারণ HTML এর সাথে কিছুটা ভিন্ন। React-এ ইভেন্ট হ্যান্ডলারগুলি সাধারণ JavaScript ফাংশন হিসাবে পরিচালিত হয়, কিন্তু এগুলোর কিছু React-স্পেসিফিক বৈশিষ্ট্য থাকে।

ReactJS-এ Event Handling এর নিয়ম

১. Event Handling এর সিনট্যাক্স

React-এ ইভেন্ট হ্যান্ডলারের নামগুলো সাধারণত ক্যামেল কেস (camelCase) ফর্ম্যাটে লেখা হয়, যেহেতু HTML অ্যাট্রিবিউটের নামগুলো সাধারণত লোয়ার-কেস (lowercase) থাকে। React-এ JavaScript ফাংশন ব্যবহারের জন্য অ্যাট্রিবিউট নামগুলি ক্যামেল কেস ফর্ম্যাটে থাকতে হবে।

HTML:

<button onclick="alert('Button clicked!')">Click me</button>

React:

<button onClick={handleClick}>Click me</button>

এখানে, onClick হল React এর ইভেন্ট, যা ক্যামেল কেস ফর্ম্যাটে লেখা হয়েছে। React-এ ইভেন্ট হ্যান্ডলারের নামগুলি সঠিকভাবে ক্যামেল কেসে থাকতে হবে, যেমন: onClick, onChange, onSubmit ইত্যাদি।

২. ইভেন্ট হ্যান্ডলার ফাংশন

React-এ ইভেন্ট হ্যান্ডলারের ফাংশন সাধারণ JavaScript ফাংশন হিসেবে ডিফাইন করা হয়, এবং এটি সাধারণভাবে একটি ফাংশন রেফারেন্স হয়ে থাকে।

উদাহরণ:

import React from 'react';

function App() {
  // ইভেন্ট হ্যান্ডলার ফাংশন
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

এখানে, handleClick হল একটি ফাংশন যা বাটনে ক্লিক হলে চালিত হবে।

৩. Event Handler এ প্যারামিটার পাস করা

React-এ ইভেন্ট হ্যান্ডলারকে প্যারামিটার পাস করতে হলে, আপনি একটি arrow function বা .bind() ব্যবহার করতে পারেন।

Arrow Function ব্যবহার:

import React from 'react';

function App() {
  // ইভেন্ট হ্যান্ডলার ফাংশন
  const handleClick = (name) => {
    alert('Hello, ' + name);
  };

  return (
    <button onClick={() => handleClick('John')}>Click me</button>
  );
}

এখানে, handleClick ফাংশনে name প্যারামিটার পাস করা হয়েছে এবং বাটনে ক্লিক করার সময় এটি চালু হবে।

.bind() ব্যবহার:

import React from 'react';

class App extends React.Component {
  handleClick(name) {
    alert('Hello, ' + name);
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this, 'John')}>Click me</button>
    );
  }
}

এখানে, .bind() ব্যবহার করে প্যারামিটার পাস করা হয়েছে।

৪. ইভেন্ট অবজেক্ট

React-এ ইভেন্ট হ্যান্ডলার ফাংশনে একটি ইভেন্ট অবজেক্ট পাঠানো হয়, যা সম্পর্কে আরও তথ্য পেতে সাহায্য করে। আপনি event অবজেক্টের মাধ্যমে ইভেন্টের বিস্তারিত তথ্য পেতে পারেন, যেমন কোন কী প্রেস করা হয়েছে বা মাউস কোথায় ক্লিক হয়েছে।

উদাহরণ:

import React from 'react';

function App() {
  const handleClick = (event) => {
    alert('Button clicked at position: ' + event.clientX + ', ' + event.clientY);
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

এখানে, event.clientX এবং event.clientY দিয়ে মাউসের ক্লিক পজিশন জানা যাবে।

৫. preventDefault() এবং stopPropagation() ব্যবহার

React ইভেন্ট হ্যান্ডলারগুলিতে preventDefault() এবং stopPropagation() মেথডগুলোর ব্যবহারও করা যায়। এগুলি ইভেন্টের ডিফল্ট আচরণ রোধ করতে সাহায্য করে, যেমন ফর্ম সাবমিট হওয়া বা বাটনে ক্লিক করা হলে পেজ রিফ্রেশ হওয়া।

উদাহরণ:

import React from 'react';

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();  // ফর্মের ডিফল্ট সাবমিট রোধ করে
    alert('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

এখানে, event.preventDefault() ফর্মের সাবমিট হওয়া রোধ করছে।

৬. ইভেন্ট বাউন্ডলিং (Class কম্পোনেন্টের জন্য)

React Class কম্পোনেন্টে, আপনি সাধারণত ইভেন্ট হ্যান্ডলারের ফাংশনকে .bind() করে বাউন্ড করতে হয়, যাতে this সঠিকভাবে কাজ করে। তবে, ES6 ফাংশন ব্যবহার করলে .bind() করার প্রয়োজন হয় না।

Class কম্পোনেন্টে .bind() ব্যবহার:

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

এখানে, .bind(this) ব্যবহার করা হয়েছে যাতে this.handleClick সঠিকভাবে বাউন্ড হয়।

ইভেন্ট টাইপের উদাহরণ:

1. onClick: মাউস ক্লিক হওয়ার সময় ইভেন্ট ঘটে।
2. onChange: ইনপুট ফিল্ডের মান পরিবর্তিত হলে।
3. onSubmit: ফর্ম সাবমিট হলে।
4. onKeyUp/onKeyDown: কীবোর্ডের কী প্রেস করা হলে।
5. onMouseOver/onMouseOut: মাউস এলিমেন্টের উপরে বা নিচে যাওয়ার সময়।

সারাংশ

ReactJS-এ ইভেন্ট হ্যান্ডলিং HTML এর সাথে কিছুটা ভিন্ন, যেখানে ইভেন্ট নামগুলো ক্যামেল কেস ফর্ম্যাটে লেখা হয় এবং ইভেন্ট হ্যান্ডলার ফাংশন JavaScript ফাংশন হিসেবে ব্যবহৃত হয়। React ইভেন্ট হ্যান্ডলিং সহজ এবং কার্যকরভাবে ইউজার ইন্টারঅ্যাকশন ট্র্যাক করতে সক্ষম, এবং ইভেন্ট অবজেক্টের মাধ্যমে আপনি আরও বিস্তারিত তথ্য পেতে পারেন।