Event Handling in React – সম্পূর্ণ বাংলায় ব্যাখ্যা

React-এ Event Handling হলো UI-তে ব্যবহারকারীর যেকোনো action (যেমন: ক্লিক করা, টাইপ করা, হোভার করা) — এগুলোকে ধরার এবং তার উপর ভিত্তি করে কোড চালানোর প্রক্রিয়া। এটি ঠিক একইভাবে কাজ করে যেমন ব্রাউজারের সাধারণ events কাজ করে, তবে React event system আরও সহজ, নিরাপদ এবং performance-friendly।

🔹 Event Handling কী?

যখন কোনো ব্যবহারকারী UI-এর সাথে ইন্টারঅ্যাক্ট করে, তখন React সেই event ধরে এবং নির্দিষ্ট function এর মাধ্যমে তার response নির্ধারণ করে। যেমন:

• Button click
• Input field change
• Mouse hover
• Key press
• Form submit

React এই event গুলোকে একটি SyntheticEvent সিস্টেমের মাধ্যমে হ্যান্ডেল করে।

🔹 React-এ Event Handling কেমন হয়?

HTML এর মতো React-এ events লেখা হয়, তবে নামগুলো CamelCase হয়:

HTML উদাহরণ:

<button onclick="handleClick()">Click</button>

React উদাহরণ:

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

🔹 Basic Event Handling Example

function HandleEventExample() {

  function handleClick() {
    alert("Button Clicked!");
  }

  return (
    <div>
      <h2>Event Handling Example</h2>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

export default HandleEventExample;

এখানে onClick event-এ function পাঠানো হয়েছে। Browser button চাপলেই সেই function চালাবে।

🔹 Inline Arrow Function ব্যবহার

React-এ সরাসরি inline function ও লেখা যায়:

<button onClick={() => alert("Clicked!")}>Click</button>

⚠️ যদি event-এ heavy কাজ থাকে, inline function ব্যবহার করা ভালো নয়।

🔹 Event Handler-এ Parameter পাঠানো

কখনো event handler function-এ parameter পাঠানো লাগে।

function UserList() {

  function handleUserClick(name) {
    alert("User: " + name);
  }

  return (
    <div>
      <button onClick={() => handleUserClick("Rahim")}>Rahim</button>
      <button onClick={() => handleUserClick("Karim")}>Karim</button>
    </div>
  );
}

🔹 SyntheticEvent (React Event System)

React events হলো SyntheticEvent — এটি ব্রাউজারের native event-এর উপর একটি wrapper। এই সিস্টেম performance ভালো রাখে এবং সব browser-এ একইভাবে কাজ করে।

একটি উদাহরণ:

function InputEvent() {

  function handleChange(event) {
    console.log("Input Value:", event.target.value);
  }

  return (
    <input type="text" onChange={handleChange} />
  );
}

event.target.value এর মাধ্যমে input এর ভ্যালু পাওয়া যায়।

🔹 Common React Events তালিকা

🔹 Prevent Default Example

HTML form-এর default submit behavior বন্ধ করতে:

function FormExample() {

  function handleSubmit(event) {
    event.preventDefault();
    alert("Form Submitted!");
  }

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

event.preventDefault() form-এর default reload বন্ধ করে।

🔹 Event Handling এর Best Practices

• Function-এর নাম meaningful রাখুন (যেমন: handleClick, handleChange)
• Inline function কম ব্যবহার করুন
• Event handler আলাদা function হিসেবে লিখুন
• যেখানে প্রয়োজন সেখানে arrow function ব্যবহার করুন
• Form submit হলে always preventDefault() ব্যবহার করুন

🔹 Summary

• React-এ events camelCase এ লেখা হয়
• Functions JSX-এ reference হিসেবে দিতে হয়
• Parameter দিতে চাইলে arrow function ব্যবহার করা হয়
• event.target.value দিয়ে input এর মান পাওয়া যায়
• React events হলো SyntheticEvent, যা performance-friendly

🎉 শেষ কথা

Event Handling ভালোভাবে শিখলে আপনি সহজেই dynamic UI তৈরি করতে পারবেন। React-এর প্রতিটি interactive feature event system-এর উপর ভিত্তি করে কাজ করে। তাই ছোট ছোট প্রজেক্ট করে event handling প্র্যাকটিস করুন।