OnClick, OnChange, এবং অন্যান্য Events হ্যান্ডল করা

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 কম্পোনেন্টের ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে পারেন।