React Event Handling

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

React-এ সাধারণভাবে ইভেন্টগুলি ইভেন্ট লিসেনার (event listeners) হিসেবে কাজ করে, যা ইউজারের অ্যাকশনের (যেমন ক্লিক, হোভার, কীবোর্ড ইনপুট) প্রতিক্রিয়া দেখায়। এই ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আপনি কাস্টম কার্যক্রম নির্ধারণ করতে পারেন।

React Event Handling এর মৌলিক ধারণা

React-এ ইভেন্ট হ্যান্ডলিং JavaScript-এ ব্যবহৃত ইভেন্টগুলির মতোই, তবে React এই ইভেন্টগুলোকে একটি কাস্টম সিনট্যাক্সে প্রণয়ন করে। উদাহরণস্বরূপ, JavaScript-এ onclick ব্যবহার করার পরিবর্তে, React-এ এটি onClick হিসেবে লিখতে হয়।

React-এর ইভেন্ট হ্যান্ডলিংয়ের কিছু মৌলিক দিক:

1. React-এর ইভেন্ট নামগুলি ক্যামেল কেস (CamelCase) ফরম্যাটে হয়:
   • উদাহরণ: onClick, onChange, onSubmit, onKeyPress, ইত্যাদি।
2. ইভেন্ট হ্যান্ডলার ফাংশন নির্ধারণ: React-এ ইভেন্ট হ্যান্ডলারকে একটি ফাংশন হিসেবে নির্ধারণ করা হয়। ফাংশনটি একটি কম্পোনেন্টের মধ্যে লেখা হয় এবং এটি ইউজারের ইন্টারঅ্যাকশন অনুযায়ী কল হয়।
3. বাইন্ডিং (Binding) এর প্রয়োজন হয় না: React নিজে থেকেই ইভেন্ট হ্যান্ডলারের this কনটেক্সটকে সঠিকভাবে ম্যানেজ করে, তাই বাইন্ডিং এর দরকার হয় না (যেমন ক্লাস ভিত্তিক কম্পোনেন্টে).

React Event Handling এর উদাহরণ

১. Button Click ইভেন্ট হ্যান্ডলিং

এখানে একটি সাধারণ React কম্পোনেন্ট দেওয়া হচ্ছে যা একটি বাটন ক্লিক করার মাধ্যমে একটি মেসেজ দেখাবে।

import React, { useState } from 'react';

function ClickButton() {
  const [message, setMessage] = useState('');

  // Event Handler
  const handleClick = () => {
    setMessage('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <p>{message}</p>
    </div>
  );
}

export default ClickButton;

এখানে, onClick ইভেন্ট ব্যবহার করা হয়েছে এবং handleClick ফাংশনটি বাটন ক্লিকের পরে কল হবে। ইউজার বাটন ক্লিক করলে, setMessage ফাংশনটি মেসেজ আপডেট করবে।

২. Input Field Change ইভেন্ট হ্যান্ডলিং

এই উদাহরণে একটি ইনপুট ফিল্ডের মাধ্যমে ইউজারের ইনপুট নেওয়া হচ্ছে এবং সেটি পরবর্তী সময়ে UI-তে প্রদর্শন করা হচ্ছে।

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  // Event Handler
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

export default TextInput;

এখানে, onChange ইভেন্ট হ্যান্ডলারটি ইনপুট ফিল্ডে কোনো পরিবর্তন হলে কল হবে এবং ইনপুটের মান পরিবর্তন হবে।

React Event Handling এর আরও উদাহরণ

৩. Form Submit ইভেন্ট হ্যান্ডলিং

import React, { useState } from 'react';

function FormSubmit() {
  const [name, setName] = useState('');

  // Event Handler
  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent form from reloading
    alert('Form submitted with name: ' + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormSubmit;

এখানে, onSubmit ইভেন্ট ব্যবহার করা হয়েছে এবং ফর্মটি সাবমিট করার পরে একটি alert পপআপ হবে।

৪. Mouse Hover ইভেন্ট হ্যান্ডলিং

import React, { useState } from 'react';

function MouseHover() {
  const [hovered, setHovered] = useState(false);

  const handleMouseEnter = () => {
    setHovered(true);
  };

  const handleMouseLeave = () => {
    setHovered(false);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ width: '200px', height: '100px', backgroundColor: hovered ? 'green' : 'red' }}
    >
      <p>{hovered ? 'Mouse is here!' : 'Hover over me!'}</p>
    </div>
  );
}

export default MouseHover;

এখানে, onMouseEnter এবং onMouseLeave ইভেন্টের মাধ্যমে মাউসের অবস্থান পরিবর্তন হলে ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হয়।

React Event Handling এর গুরুত্বপূর্ণ দিক

1. এন্ড লাইন (Arrow Functions) ব্যবহার: ইভেন্ট হ্যান্ডলার ফাংশন লেখা যখন ক্লাস ভিত্তিক কম্পোনেন্টে ব্যবহার করতে হয়, তখন অনেক সময় this কনটেক্সটের সমস্যা হতে পারে। কিন্তু React ফাংশনাল কম্পোনেন্টে আপনি সাধারণত এন্ড লাইন (arrow functions) ব্যবহার করলে এই সমস্যা থেকে মুক্তি পাওয়া যায়।
2. Synthetic Events: React-এ ইভেন্ট হ্যান্ডলিং SyntheticEvent ব্যবহার করে করা হয়, যা React দ্বারা ইমপ্লিমেন্ট করা হয়। এটি ব্রাউজারের প্রকৃত DOM ইভেন্টের একটি ক্রস-ব্রাউজার wrapper হিসেবে কাজ করে এবং এটি একাধিক ব্রাউজার পরিবেশে একই আচরণ নিশ্চিত করে।
3. preventDefault() এবং stopPropagation(): React-এ ইভেন্ট হ্যান্ডলার ফাংশনের মধ্যে event.preventDefault() ব্যবহার করা যায়, যা ডিফল্ট ব্রাউজার আচরণকে বন্ধ করে দেয় (যেমন ফর্ম সাবমিট হওয়া)। event.stopPropagation() ব্যবহার করলে ইভেন্ট বাবলিং রোধ করা যায়।

সারাংশ

ReactJS-এ ইভেন্ট হ্যান্ডলিং সহজ এবং শক্তিশালী। JSX সিনট্যাক্সের মাধ্যমে আপনি সহজেই ইউজার ইন্টারঅ্যাকশনগুলি পরিচালনা করতে পারেন, এবং React এর ডাইনামিক এবং ইন্টারঅ্যাকটিভ UI নির্মাণের ক্ষমতা নিশ্চিত করেন।

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 ইভেন্ট হ্যান্ডলিং সহজ এবং কার্যকরভাবে ইউজার ইন্টারঅ্যাকশন ট্র্যাক করতে সক্ষম, এবং ইভেন্ট অবজেক্টের মাধ্যমে আপনি আরও বিস্তারিত তথ্য পেতে পারেন।

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

React-এ ইভেন্ট হ্যান্ডলিং: মৌলিক ধারণা

React-এ ইভেন্ট হ্যান্ডলিং HTML-এর মতোই, তবে কিছু বিশেষত্ব রয়েছে:

• React ইভেন্টগুলি ক্যামেল কেস (camelCase) সিনট্যাক্স ব্যবহার করে।
• ইভেন্ট হ্যান্ডলারের মধ্যে সাধারণত একটি ফাংশন পাস করতে হয়, যা ইভেন্টটি পরিচালনা করবে।
• React নিজেই ইভেন্ট অবজেক্ট তৈরি করে এবং এটি হ্যান্ডলার ফাংশনে পাস করে।
• React-এ ইভেন্ট হ্যান্ডলিং করা হয় on<EventName> অ্যাট্রিবিউটের মাধ্যমে (যেমন onClick, onChange, onSubmit ইত্যাদি)।

১. onClick ইভেন্ট হ্যান্ডলিং

onClick ইভেন্ট ব্যবহারকারী যখন একটি বাটনে ক্লিক করেন, তখন এটি ট্রিগার হয়। React-এ onClick হ্যান্ডলার পদ্ধতি HTML এর মতোই কাজ করে, তবে এটি JavaScript ফাংশনকে হ্যান্ডল করতে সক্ষম।

উদাহরণ:

import React from 'react';

function Button() {
  const handleClick = () => {
    alert("Button clicked!");
  };

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

export default Button;

এখানে, onClick ইভেন্ট হ্যান্ডলার handleClick ফাংশনটিকে কল করবে, যা বাটন ক্লিকের পর একটি অ্যলার্ট বার্তা প্রদর্শন করবে।

২. onChange ইভেন্ট হ্যান্ডলিং

onChange ইভেন্ট ইউজারের ইনপুট পরিবর্তন করার সময় ট্রিগার হয়। এটি সাধারণত ফর্ম ইনপুট ফিল্ড, চেকবক্স, রেডিও বাটন ইত্যাদির জন্য ব্যবহৃত হয়।

উদাহরণ:

import React, { useState } from 'react';

function InputField() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
      />
      <p>You typed: {inputValue}</p>
    </div>
  );
}

export default InputField;

এখানে, onChange ইভেন্টটি ইউজারের ইনপুট পরিবর্তন হওয়ার সাথে সাথে handleChange ফাংশনটি কল করে, যা ইনপুটের মান inputValue স্টেটে আপডেট করে এবং UI তে সেই মান দেখায়।

৩. onSubmit ইভেন্ট হ্যান্ডলিং

onSubmit ইভেন্ট ফর্ম সাবমিট করার সময় ট্রিগার হয়। এটি ফর্মের ডিফল্ট আচরণ (পেজ রিফ্রেশ) প্রতিরোধ করার জন্য ব্যবহৃত হয়, যাতে আপনি ইউজারের ইনপুট পরীক্ষা করে ডাটা প্রসেস করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // পেজ রিফ্রেশ প্রতিরোধ
    alert(`Form submitted with name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          value={name} 
          onChange={(e) => setName(e.target.value)} 
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

এখানে, onSubmit ফর্মের ডিফল্ট সাবমিট অ্যাকশনকে প্রতিরোধ করে এবং ইউজারের ইনপুট মান প্রদর্শন করে। event.preventDefault() ব্যবহার করে পেজ রিফ্রেশ হওয়া রোধ করা হয়েছে।

৪. onMouseEnter এবং onMouseLeave ইভেন্ট হ্যান্ডলিং

onMouseEnter এবং onMouseLeave ইভেন্টগুলি মাউস কিউরসরের একটি এলিমেন্টের উপর এন্ট্রি এবং এক্সিটের সময় ট্রিগার হয়। এগুলি সাধারণত হোভার ইফেক্ট তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

import React, { useState } from 'react';

function HoverEffect() {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <div 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave} 
      style={{ 
        width: '200px', 
        height: '200px', 
        backgroundColor: isHovered ? 'blue' : 'gray' 
      }}
    >
      Hover over me!
    </div>
  );
}

export default HoverEffect;

এখানে, onMouseEnter এবং onMouseLeave ব্যবহার করে মাউস হোভার করার সময় ব্যাকগ্রাউন্ড রং পরিবর্তন হচ্ছে।

৫. onKeyPress, onKeyDown এবং onKeyUp ইভেন্ট হ্যান্ডলিং

এগুলি কিবোর্ড ইনপুটের জন্য ব্যবহৃত হয়। onKeyPress একটি কিপ্রেসের সময়, onKeyDown কিপ্রেস শুরু হওয়ার সময় এবং onKeyUp কিপ্রেস শেষ হওয়ার সময় ট্রিগার হয়।

উদাহরণ:

import React, { useState } from 'react';

function KeyPress() {
  const [key, setKey] = useState('');

  const handleKeyPress = (event) => {
    setKey(event.key); // pressed key
  };

  return (
    <div>
      <input type="text" onKeyPress={handleKeyPress} />
      <p>Last pressed key: {key}</p>
    </div>
  );
}

export default KeyPress;

এখানে, onKeyPress ইভেন্টের মাধ্যমে ইউজার কোন কিপ্রেস করেছেন তা key স্টেটে সেভ করা হচ্ছে এবং তা UI তে দেখানো হচ্ছে।

React-এ ইভেন্ট হ্যান্ডলিংয়ের কিছু মূল বিষয়

• ইভেন্ট হ্যান্ডলার ফাংশন পাস করুন: React-এ ইভেন্ট হ্যান্ডলার ফাংশনকে সাধারণত একটি ফাংশন হিসেবে পাস করা হয়। এটি ইভেন্ট অবজেক্টকে ধারণ করে এবং ইভেন্ট ট্রিগার হওয়ার পর প্রাসঙ্গিক কাজটি সম্পন্ন করে।
• ক্যামেল কেস সিনট্যাক্স: React-এ HTML-এর onclick বা onchange এর পরিবর্তে onClick, onChange ইত্যাদি ক্যামেল কেস সিনট্যাক্স ব্যবহার করা হয়।
• ইভেন্ট অবজেক্ট: React স্বয়ংক্রিয়ভাবে ইভেন্ট অবজেক্ট তৈরি করে এবং ইভেন্ট হ্যান্ডলারের মাধ্যমে এটি পাস করে। এই অবজেক্টে বিভিন্ন তথ্য যেমন target, type, key ইত্যাদি থাকে, যা ইভেন্ট সম্পর্কিত বিস্তারিত তথ্য দেয়।

সারাংশ

React-এ ইভেন্ট হ্যান্ডলিং HTML-এর মতোই হলেও এতে কিছু পার্থক্য রয়েছে। React-এ onClick, onChange, onSubmit, onMouseEnter ইত্যাদি ইভেন্টগুলো ক্যামেল কেস সিনট্যাক্স ব্যবহার করে, এবং প্রতিটি ইভেন্ট হ্যান্ডলার একটি ফাংশন হিসেবে কাজ করে যা ইভেন্ট অবজেক্ট পাস করে। এই ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি React কম্পোনেন্টের ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে পারেন।

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 আপডেটগুলি আরও ডাইনামিক ও কার্যকরভাবে নিয়ন্ত্রণ করতে পারেন।

ReactJS-এ ইভেন্ট হ্যান্ডলিং একটি গুরুত্বপূর্ণ কনসেপ্ট, যা ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন, ক্লিক, কীবোর্ড ইনপুট, মাউস মুভমেন্ট) পরিচালনা করতে সাহায্য করে। React কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং সাধারণভাবে দুইভাবে করা হয়: Event Binding এবং Inline Functions। এই দুটি পদ্ধতির মাধ্যমে React কম্পোনেন্টে ইভেন্টগুলোকে পরিচালনা করা হয়।

Event Binding

React-এ ইভেন্টগুলি সাধারণ JavaScript ইভেন্ট হ্যান্ডলার ফাংশনগুলির মতো কাজ করে, তবে React এর কিছু পার্থক্য রয়েছে। ইভেন্টগুলির মধ্যে ফাংশন রেফারেন্সকে বাউন্ড করতে হয়, যাতে সঠিক this কনটেক্সট ব্যবহার করা যায়। সাধারণত this কে ইভেন্ট হ্যান্ডলার ফাংশনে ঠিকভাবে বাউন্ড করতে bind() মেথড ব্যবহার করা হয়। এটি ক্লাস কম্পোনেন্টে বেশি প্রয়োজন হয়।

উদাহরণ (Class Component):

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello, World!"
    };

    // Event Binding: 'this' কে bind করা
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ message: "Button clicked!" });
  }

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

export default MyComponent;

এখানে:

• this.handleClick.bind(this) ব্যবহার করা হয়েছে handleClick মেথডের this কনটেক্সট সঠিকভাবে বাউন্ড করার জন্য।
• handleClick মেথডটি onClick ইভেন্টে কল করা হচ্ছে।

কেন bind() ব্যবহার করা হয়?

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

Inline Functions

React ফাংশন কম্পোনেন্টে, Inline Functions ব্যবহার করা অনেক বেশি জনপ্রিয় এবং সহজ। এখানে, আপনি ইভেন্ট হ্যান্ডলারকে ফাংশন কলের মাধ্যমে সরাসরি JSX-এর মধ্যে ব্যবহার করতে পারেন। Inline ফাংশন ব্যবহার করলে কোড আরও সংক্ষিপ্ত এবং সহজ হয়, কিন্তু এর কিছু পারফরম্যান্স ইমপ্যাক্টও হতে পারে (বিশেষ করে বড় অ্যাপ্লিকেশনে)।

উদাহরণ (Function Component):

import React, { useState } from 'react';

const MyComponent = () => {
  const [message, setMessage] = useState("Hello, World!");

  const handleClick = () => {
    setMessage("Button clicked!");
  };

  return (
    <div>
      <p>{message}</p>
      {/* Inline Function */}
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;

এখানে:

• Inline ফাংশন হিসেবে handleClick সরাসরি JSX কোডে ব্যবহার করা হয়েছে।
• ইভেন্ট হ্যান্ডলার onClick={handleClick} সিনট্যাক্সে পাস করা হয়েছে।

Inline Function-এর সুবিধা:

• কোড আরও সংক্ষিপ্ত এবং পড়তে সহজ।
• অধিকাংশ সময়ে পারফরম্যান্সের কোনো সমস্যা সৃষ্টি হয় না (তবে খুব বড় প্রজেক্টে Inline ফাংশন ব্যবহারে কিছু সমস্যা হতে পারে, যেমন প্রতিবার রেন্ডার হওয়ার সময় ফাংশন নতুনভাবে তৈরি হয়)।

Inline Functions এবং Event Binding-এর তুলনা

Event Handling in JSX

React-এ JSX এর মধ্যে ইভেন্ট হ্যান্ডলিং খুবই সহজ। ইভেন্টগুলির নাম সাধারণত HTML-এর ইভেন্ট নামের মতো হলেও ক্যামেলকেস স্টাইলে থাকে। উদাহরণস্বরূপ:

• onClick (HTML এর onclick)
• onChange (HTML এর onchange)
• onSubmit (HTML এর onsubmit)

উদাহরণ:

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

এখানে onClick ইভেন্ট হ্যান্ডলার this.handleClick ফাংশনের রেফারেন্স হিসাবে কাজ করছে।

উপসংহার

React-এ ইভেন্ট হ্যান্ডলিং সহজ এবং কার্যকরী, তবে কিছু ক্ষেত্রে bind() মেথড ব্যবহার করা প্রয়োজন হতে পারে, যেমন ক্লাস কম্পোনেন্টে। ফাংশন কম্পোনেন্টে Inline Functions একটি জনপ্রিয় এবং সুবিধাজনক পদ্ধতি। প্রতিটি পদ্ধতির নিজস্ব সুবিধা এবং সীমাবদ্ধতা রয়েছে, তাই React অ্যাপ্লিকেশন ডিজাইন করার সময় সঠিক পদ্ধতি নির্বাচন করা গুরুত্বপূর্ণ।