ReactJS Handle Events With Examples

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में events को handle करना React का एक fundamental concept है, जो applications को interactive और user-friendly बनाता है।

जैसे हम HTML में button click, mouse hover, या form submit के events handle करते हैं, वैसे ही React में भी events handle किये जाते हैं। लेकिन React में event handling का syntax और approach थोड़ा अलग और modern होता है।

इस topic में हम देखेंगे कि ReactJS में events कैसे handle करते हैं, events के types, और कैसे हम class components और functional components में events को manage कर सकते हैं।

●●●

React Events Basics

React में event handling का syntax JavaScript के DOM events से काफी similar है, लेकिन कुछ differences हैं -

• React में event names camelCase में होते हैं (e.g., onClick instead of onclick).

• React में JavaScript के functions को directly curly braces {} में wrap करके event attributes में लिखते हैं।

Example of React Event

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

यहां handleClick एक function है जो onClick event पर execute होता है।

●●●

Event Handling In Functional Components

Functional components में हम events को handle करने के लिए direct functions या arrow functions का use करते हैं। React में arrow functions को prefer किया जाता है क्योंकि ये syntax को simple और this keyword handling में flexible बनाते हैं।

Example of Event Handling In Functional Component

File : src/components/ClickButton.js

Copy
import React from 'react';

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

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

export default ClickButton;

Explanation

• handleClick function एक alert display करता है जब button पर click होता है।

• onClick attribute के साथ function directly {handleClick} कि तरह pass किया गया है।

Passing Arguments In Event Handlers

अगर हमें किसी event handler में arguments pass करने हो तो हम arrow functions या anonymous functions का use कर सकते हैं।

File : src/components/GreetButton.js

Copy
import React from 'react';

function GreetButton() {
  const greet = (name) => {
    alert(`Hello, ${name}!`);
  };

  return (
    <button onClick={() => greet('Alice')}>Greet</button>
  );
}

export default GreetButton;

Explanation

• greet function को onClick में call करते वक्त name argument pass किया गया है।

• Arrow function का use करके greet('Alice') function call बनाया गया है।

●●●

Event Handling with Inline Functions

React में, हम inline functions का भी use कर सकते हैं event handlers में, जो code readability और performance को affect कर सकता है अगर complex events हो तो।

लेकिन simple cases में ये useful होते हैं।

File : src/components/DoubleButton.js

Copy
import React, { useState } from 'react';

function DoubleButton() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count * 2)}>Double</button>
    </div>
  );
}

export default DoubleButton;

Explanation

• DoubleButton में onClick attribute में inline arrow function directly setCount को call कर रहा है।

• Inline functions smaller events के लिए useful हैं लेकिन complex logic में code readability को affect कर सकते हैं।

●●●

Event Pooling in React

React में event pooling एक performance optimization technique है जो synthetic events को re-use करता है।

यह technique events के memory usage को कम करता है, लेकिन अगर आप asynchronously event को access करना चाहें , तो आपको event.persist() का use करना पड़ता है।

Example of Event Pooling

Location : src/components/PoolingExample.js

Copy
import React from 'react';

function PoolingExample() {
  const handleClick = (event) => {
    event.persist(); // Prevents event from being reused
    setTimeout(() => {
      alert(`Event type: ${event.type}`);
    }, 1000);
  };

  return (
    <button onClick={handleClick}>Check Event Type</button>
  );
}

export default PoolingExample;

Explanation

• event.persist() event pooling को disable करता है ताकि event object asynchronous code में भी accessible रहे।

• Button click hone के 1 second बाद alert message event का type show करता है।

●●●

Synthetic Events In ReactJs

React में हर event एक SyntheticEvent होता है, जो React के virtual DOM और real DOM के बीच event handling को optimize करता है। यह React का wrapper होता है जो events को cross-browser compatible बनाता है।

React में event handling काफी powerful और flexible है, जो application को interactive और user-friendly बनाता है। Event handling को समझना React के interactive और dynamic UIs बनाने में help करता है।

Happy coding! 🎉