DEV Community

banti kevat
banti kevat

Posted on • Originally published at itinfohubs.blogspot.com

React me Events Handling Complete Guide

#react #webdev #javascript #programming

React me Events Handling Complete Guide (in Hindi)
React me Events Handling Complete Guide: सीखें React में onClick, onChange और SyntheticEvent का सही इस्तेमाल, आसान हिंदी उदाहरणों और Best Practices के साथ।

क्या आपके बटन पर क्लिक करते ही पूरा वेब पेज रीलोड हो जाता है? या फिर इनपुट बॉक्स में टाइप करते समय स्टेट अपडेट नहीं हो रही है? अगर आप भी React में काम करते समय ऐसी छोटी-बड़ी समस्याओं से परेशान हैं, तो बिल्कुल सही जगह आए हैं!

⚡ Quick Answer: React me Events Handling का मतलब है यूजर इंटरैक्शन (जैसे click, submit, change) को कैप्चर और रिस्पॉन्ड करना। React इसके लिए SyntheticEvent का उपयोग करता है, जो सभी ब्राउज़र्स में एक जैसा व्यवहार सुनिश्चित करता है। इसे हैंडल करने के लिए हम JSX में camelCase एट्रिब्यूट्स (जैसे onClick) का उपयोग करते हैं।
तो मेरे प्यारे दोस्तों, आज के इस कंप्लीट गाइड में हम ReactJS में इवेंट्स को हैंडल करने के हर एक पहलू को बिल्कुल बारीकी से समझेंगे। पेन और पेपर उठा लीजिए, और चलिए इस सफर को शुरू करते हैं!

---

React में Events Handling क्या है और यह कैसे काम करता है?

जब भी कोई यूजर हमारी वेबसाइट पर आकर कोई एक्शन लेता है—जैसे माउस हिलाना, बटन पर क्लिक करना, कीबोर्ड की कोई की दबाना, या फॉर्म सबमिट करना—तो उसे हम Event कहते हैं। इन इवेंट्स को पकड़कर अपने कोड में लॉजिक चलाना ही Event Handling कहलाता है।

अगर आपने Vanilla JavaScript में काम किया है, तो आपको याद होगा कि हम इवेंट्स को कुछ इस तरह हैंडल करते थे:

// Vanilla JS Code
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
  console.log('Button clicked!');
});
Enter fullscreen mode Exit fullscreen mode

लेकिन React में चीजें थोड़ी बदल जाती हैं। यहाँ हम सीधे DOM Elements पर Event Listeners नहीं लगाते, बल्कि JSX के अंदर ही इवेंट्स को डिक्लेअर करते हैं। React में इवेंट हैंडल करने के दो मुख्य नियम हैं:

  • camelCase Naming Convention: HTML में जहाँ हम onclick लिखते थे, वहीं React में हम onClick (C कैपिटल) लिखेंगे। इसी तरह onsubmit बन जाता है onSubmit।
  • Passing Functions as Handlers: JSX में हम इवेंट हैंडलर को एक स्ट्रिंग के रूप में नहीं, बल्कि एक Curly Braces {} के अंदर एक फंक्शन रेफरेंस के रूप में पास करते हैं।

---

React Events और Standard HTML Events में क्या अंतर है?

इंटरव्यू में अक्सर पूछा जाता है कि React Events और Standard HTML DOM Events में क्या अंतर है। इसे समझने के लिए नीचे दी गई तुलना तालिका (Comparison Table) को ध्यान से देखें:

फ़ीचर (Feature) Standard HTML DOM Events React Synthetic Events
Event Name Casing Lowercase का उपयोग होता है (e.g., onclick) camelCase का उपयोग होता है (e.g., onClick)
Event Handler Type स्ट्रिंग वैल्यू पास की जाती है (e.g., "handleClick()") फंक्शन रेफरेंस पास किया जाता है (e.g., {handleClick})
Default Behavior Prevention false रिटर्न करके भी रोका जा सकता है हमेशा preventDefault() मेथड कॉल करनी पड़ती है
Performance Mechanism हर नोड के लिए अलग Listener बनता है Event Delegation और Root level listener का इस्तेमाल होता है

---

React का SyntheticEvent System कैसे काम करता है?

ध्यान देने वाली बात ये है कि React आपके इवेंट्स को सीधे ब्राउज़र के नेटिव इवेंट्स से लिंक नहीं करता। इसके बजाय, यह एक क्रॉस-ब्राउज़र रैपर का उपयोग करता है जिसे SyntheticEvent कहा जाता है।

SyntheticEvent ब्राउज़र के नेटिव इवेंट्स के ऊपर एक पतली परत (wrapper) है। इसका सबसे बड़ा फायदा यह है कि यह सुनिश्चित करता है कि आपका इवेंट हैंडलर हर ब्राउज़र (Chrome, Safari, Firefox, Edge) में बिल्कुल एक समान व्यवहार करे।

🏗️ Synthetic Event System Flow

User Action (Click)
→
Native Browser Event
→
React SyntheticEvent Wrapper
→
Our Event Handler Function

Diagram: How React wraps native DOM events into standard SyntheticEvents

जब भी कोई इवेंट ट्रिगर होता है, React उसे अपने रूट स्तर (Root Element) पर एक सिंगल इवेंट लिसनर के जरिए कैच करता है। इसे हम Event Delegation कहते हैं। इससे मेमोरी की बहुत बचत होती है और एप्लीकेशन की परफॉरमेंस भी बूस्ट होती है।

---

React me Events Handling कैसे करें? (Step-by-Step Implementation)

चलिए, अब हम कुछ वास्तविक और पूरी तरह से काम करने वाले कोड उदाहरणों के जरिए इवेंट हैंडलिंग को गहराई से समझते हैं।

स्टेप 1: बेसिक क्लिक इवेंट हैंडल करना (Basic Click Event)

सबसे पहले, हम एक साधारण क्लिक काउंटर बनाएंगे। जब भी यूजर बटन पर क्लिक करेगा, तो स्टेट अपडेट होगी और नया काउंट स्क्रीन पर दिखाई देगा।

import React, { useState } from 'react';

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

  // Event handler function
  const handleIncrement = (event) => {
    // यहाँ 'event' एक SyntheticEvent ऑब्जेक्ट है
    console.log('Event Type:', event.type); 
    setCount(count + 1);
  };

  return (

      ## सरल क्लिक काउंटर (Click Counter Example)


      काउंट का मान: {count}



        Increment Count


  );
}

export default ClickCounter;
Enter fullscreen mode Exit fullscreen mode

स्टेप 2: फॉर्म सबमिशन और इनपुट इवेंट्स को संभालना (Form Handling)

वेब डेवलपमेंट में फॉर्म्स के साथ काम करना सबसे आम काम है। यहाँ हम एक पूर्ण, सुरक्षित और फंक्शनल फॉर्म बनाएंगे जो यूजर के नाम और संदेश को स्टेट में ट्रैक करेगा और सबमिट होने पर डिफ़ॉल्ट रीलोडिंग को रोकेगा।

import React, { useState } from 'react';

function SimpleContactForm() {
  const [formData, setFormData] = useState({
    username: '',
    message: ''
  });

  // input fields के बदलाव को हैंडल करने के लिए सिंगल फंक्शन
  const handleInputChange = (event) => {
    const { name, value } = event.target;

    // dynamic property keys का उपयोग करके स्टेट अपडेट करना
    setFormData({
      ...formData,
      [name]: value
    });
  };

  // Form Submission को संभालना
  const handleSubmit = (event) => {
    // ब्राउज़र की डिफ़ॉल्ट रीलोड एक्टिविटी को रोकना अत्यंत आवश्यक है
    event.preventDefault();

    console.log('Submitted Data:', formData);
    alert(`धन्यवाद, ${formData.username}! आपका संदेश दर्ज कर लिया गया है।`);

    // फॉर्म को रीसेट करना
    setFormData({ username: '', message: '' });
  };

  return (

      ### React Interactive Form




          आपका नाम:




          संदेश लिखें:




          संदेश भेजें (Submit)



  );
}

export default SimpleContactForm;
Enter fullscreen mode Exit fullscreen mode

---

Event Handlers में Arguments/Parameters कैसे पास करें?

एक बहुत ही सामान्य समस्या जो डेवलपर्स के सामने आती है, वह है इवेंट हैंडलर में कस्टम आर्गुमेंट्स पास करना। मान लीजिए कि आपके पास एक लिस्ट है और आप किसी विशिष्ट आइटम की आईडी को डिलीट फंक्शन में भेजना चाहते हैं।

अगर आप सीधे onClick={handleDelete(id)} लिख देंगे, तो वह फंक्शन कंपोनेंट के रेंडर होते ही तुरंत एग्जीक्यूट हो जाएगा, बिना क्लिक किए! इससे बचने के हमारे पास दो तरीके हैं:

1. Arrow Function का उपयोग करके (सर्वाधिक लोकप्रिय) 

// यह सबसे आसान और साफ तरीका है
<button onClick={() => handleDelete(id)}>Delete Item</button>
Enter fullscreen mode Exit fullscreen mode

2. Function Binding का उपयोग करके 

// पुरानी Class Components में यह तरीका लोकप्रिय था
<button onClick={handleDelete.bind(this, id)}>Delete Item</button>
Enter fullscreen mode Exit fullscreen mode

चलिए इसका एक पूरा उदाहरण देखते हैं:

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'React Complete Course' },
    { id: 2, name: 'NodeJS Masterclass' },
    { id: 3, name: 'MERN Stack Guide' }
  ]);

  const handleDelete = (id, event) => {
    // हम यहाँ इवेंट ऑब्जेक्ट को भी कैप्चर कर सकते हैं
    console.log('Clicked by event:', event.type);

    const filteredItems = items.filter(item => item.id !== id);
    setItems(filteredItems);
  };

  return (

      ### My Learning Items



        {items.map((item) => (
          - {item.name} {' '}
             handleDelete(item.id, e)}
              style={{ padding: '5px 10px', backgroundColor: '#dc2626', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
            >
              हटाएं (Delete)

        ))}



  );
}

export default ItemList;
Enter fullscreen mode Exit fullscreen mode

---

React Events में होने वाली Common Errors और उन्हें कैसे Fix करें?

जब भी नए डेवलपर्स React में काम करते हैं, वे कुछ सामान्य गलतियाँ कर बैठते हैं। आइए उन गलतियों को पहचानें और देखें कि उन्हें कैसे fix error किया जाता है।

त्रुटि 1: Infinite Loop Error (रेंडर होते ही फंक्शन कॉल होना)

गलत तरीका:

// ऐसा करने से रेंडरिंग के समय ही स्टेट अपडेट हो जाएगी और इनफिनिटी लूप शुरू हो जाएगा!
<button onClick={setCount(count + 1)}>Click Me</button>
Enter fullscreen mode Exit fullscreen mode

सही समाधान:

// हमेशा इवेंट हैंडलर में केवल फंक्शन का रेफरेंस दें या एरो फंक्शन का प्रयोग करें
<button onClick={() => setCount(count + 1)}>Click Me</button>
Enter fullscreen mode Exit fullscreen mode

त्रुटि 2: 'preventDefault()' is undefined

यह error तब आती है जब आप इवेंट हैंडलर में event पैरामीटर को डिफाइन करना भूल जाते हैं, लेकिन कोड में उसे कॉल कर लेते हैं।

गलत तरीका:

const handleSubmit = () => {
  event.preventDefault(); // Error: event is undefined!
};
Enter fullscreen mode Exit fullscreen mode

सही समाधान:

const handleSubmit = (event) => {
  event.preventDefault(); // अब यह सही तरीके से काम करेगा
};
Enter fullscreen mode Exit fullscreen mode

---

React Event Handling के लिए Best Practices और Performance Optimization

अगर आप एक स्केलेबल और हाई-परफॉरमेंस एप्लीकेशन बनाना चाहते हैं, तो इन बेस्ट प्रैक्टिसेस का पालन जरूर करें:

  1. Avoid Inline Functions in Loop Renders: जब भी हम लूप (जैसे .map()) के अंदर onClick={() => doSomething(id)} लिखते हैं, तो हर रेंडर पर एक नया फंक्शन इंस्टेंस बनता है। अगर लिस्ट बहुत बड़ी है, तो यह परफॉरमेंस को प्रभावित कर सकता है। इसके लिए आप चाइल्ड कंपोनेंट्स बनाकर मेमोइजेशन का उपयोग कर सकते हैं।
  2. Use useCallback for Heavy Handlers: जब आप अपने इवेंट हैंडलर्स को चाइल्ड कंपोनेंट्स में प्रॉप्स के रूप में पास करते हैं, तो useCallback हुक का इस्तेमाल करें ताकि चाइल्ड कंपोनेंट्स बेवजह री-रेंडर न हों।
  3. Cleanup Event Listeners in useEffect: अगर आप खुद से कस्टम DOM Event Listener लगा रहे हैं (जैसे window resize या scroll इवेंट्स पर), तो कंपोनेंट के अनमाउंट (Unmount) होने पर उसे रीमूव करना न भूलें: 
useEffect(() => {
  const handleScroll = () => console.log(window.scrollY);
  window.addEventListener('scroll', handleScroll);

  // Clean up function to prevent memory leaks
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);
Enter fullscreen mode Exit fullscreen mode

इन कॉन्सेप्ट्स को और अधिक गहराई से समझने के लिए आप Official React Documentation पर भी जा सकते हैं।

---

तो दोस्तों, हमने आज क्या सीखा? हमने देखा कि React में Events Handling कैसे काम करती है, SyntheticEvent का क्या महत्व है, हम कैसे इनपुट और सबमिशन इवेंट्स को सुरक्षित तरीके से हैंडल कर सकते हैं और किस प्रकार कॉमन बग्स को दूर करके अपनी वेबसाइट की परफॉरमेंस को शानदार बना सकते हैं।

इवेंट्स को हैंडल करना ही रिएक्ट में इंटरैक्टिव और डायनामिक एप्लीकेशन बनाने की असली चाबी है। अब आपकी बारी है! इस कोड को अपने लोकल सिस्टम पर चलाकर देखें, खुद से बदलाव करें और नए फीचर्स जोड़कर अपनी स्किल्स को मजबूत करें। हैप्पी कोडिंग!

---

Frequently Asked Questions (FAQs)

Q1: React में SyntheticEvent क्या है?
SyntheticEvent ब्राउज़र के नेटिव इवेंट्स का एक क्रॉस-ब्राउज़र रैपर है। यह सभी वेब ब्राउज़र्स में एक जैसा व्यवहार सुनिश्चित करता है और बेहतरीन परफॉरमेंस के लिए इवेंट डेलिगेशन का उपयोग करता है।
Q2: React में preventDefault() का उपयोग क्यों किया जाता है?
preventDefault() का मुख्य उद्देश्य ब्राउज़र की डिफ़ॉल्ट गतिविधियों को रोकना है। उदाहरण के लिए, जब आप कोई HTML फॉर्म सबमिट करते हैं, तो पेज रीलोड हो जाता है; इसे रोकने के लिए preventDefault() का उपयोग किया जाता है।
Q3: React इवेंट्स में Arrow Functions का उपयोग करने के क्या नुकसान हैं?
अगर आप रेंडर मेथड या JSX के अंदर डायरेक्ट एरो फंक्शन का उपयोग करते हैं, तो हर रेंडर पर एक नया फंक्शन ऑब्जेक्ट बनता है। बहुत बड़े और जटिल कंपोनेंट्स में इससे परफॉरमेंस पर थोड़ा असर पड़ सकता है।
Q4: क्या हम React में standard HTML addEventListener का उपयोग कर सकते हैं?
हाँ, आप useEffect हुक के अंदर मैन्युअली addEventListener का उपयोग कर सकते हैं, विशेष रूप से तब जब आपको window या document स्तर के ग्लोबल इवेंट्स (जैसे scroll, resize, keydown) को ट्रैक करना हो।
Q5: onClick event कंपोनेंट लोड होते ही बिना क्लिक किए ही क्यों रन हो जाता है?
यह तब होता है जब आप पैरन्थेसिस () के साथ फंक्शन को तुरंत कॉल कर देते हैं (जैसे onClick={myFunction()})। इसे रोकने के लिए केवल फंक्शन का रेफरेंस दें (onClick={myFunction}) या एरो फंक्शन का प्रयोग करें।

Top comments (0)