React Event

 In React, events are objects that represent occurrences that happen within the user interface, such as a user clicking a button or typing into an input field. React provides a synthetic event system that abstracts away the differences between native browser events and provides a consistent interface for handling events across different browsers.

रिएक्ट में, ईवेंट ऐसी वस्तुएं हैं जो उपयोगकर्ता इंटरफ़ेस के भीतर होने वाली घटनाओं का प्रतिनिधित्व करती हैं, जैसे कि उपयोगकर्ता एक बटन पर क्लिक करता है या इनपुट फ़ील्ड में टाइप करता है। रिएक्ट एक सिंथेटिक ईवेंट सिस्टम प्रदान करता है जो मूल ब्राउज़र ईवेंट के बीच अंतर को दूर करता है और विभिन्न ब्राउज़रों में ईवेंट को संभालने के लिए एक सुसंगत इंटरफ़ेस प्रदान करता है।

Here's a basic overview of how events work in React:

रिएक्ट में ईवेंट कैसे काम करते हैं इसका एक बुनियादी अवलोकन यहां दिया गया है:

1. Event Handling:

2. In React, you add event handlers to your JSX elements by using camel-cased attributes like onClick, onChange, onSubmit, etc. These event handlers are defined as props for the components.

3. 
   

4. इवेंट हैंडलिंग:
5. onClick रिएक्ट में, आप कैमल-केस्ड विशेषताओं जैसे , onChange, आदि का उपयोग करके अपने JSX तत्वों में इवेंट हैंडलर जोड़ते हैं। onSubmitइन इवेंट हैंडलर को घटकों के लिए प्रॉप्स के रूप में परिभाषित किया गया है।
6. react click event typescript

7. jsx
   function ButtonComponent() {
     const handleClick = () => {
       console.log('Button clicked!');
     };
   
     return <button onClick={handleClick}>Click me</button>;
   }
   

8. Event Object:

   When an event occurs, React automatically passes an event object to your event handler function. This object, often referred to as the "synthetic event," wraps the native browser event and provides a consistent interface across different browsers.

9. 
   
ईवेंट ऑब्जेक्ट: जब कोई ईवेंट घटित होता है, तो रिएक्ट स्वचालित रूप से ईवेंट ऑब्जेक्ट को आपके ईवेंट हैंडलर फ़ंक्शन में भेज देता है। यह ऑब्जेक्ट, जिसे अक्सर "सिंथेटिक इवेंट" कहा जाता है, मूल ब्राउज़र इवेंट को लपेटता है और विभिन्न ब्राउज़रों में एक सुसंगत इंटरफ़ेस प्रदान करता है।react onchange event typescript

10. jsx
    function InputComponent() {
      const handleChange = (event) => {
        console.log('Input value:', event.target.value);
      };
    
      return <input type="text" onChange={handleChange} />;
    }
    

11. Event Propagation:

    Just like in native browser events, React's synthetic events follow the same event propagation model (bubbling and capturing). The event starts at the target element and then bubbles up to the root of the document. You can control event propagation using methods like stopPropagation() and preventDefault().
    इवेंट प्रसार: मूल ब्राउज़र इवेंट की तरह, रिएक्ट के सिंथेटिक इवेंट उसी इवेंट प्रसार मॉडल (बबलिंग और कैप्चरिंग) का पालन करते हैं। ईवेंट लक्ष्य तत्व पर शुरू होता है और फिर दस्तावेज़ की जड़ तक बुलबुले बन जाता है। आप stopPropagation()और जैसे तरीकों का उपयोग करके घटना प्रसार को नियंत्रित कर सकते हैं preventDefault()।
12. react event typescript

13. jsx
    function ClickableDiv() {
      const handleClick = (event) => {
        event.stopPropagation(); // Stop the event from bubbling further
        console.log('Div clicked!');
      };
    
      return <div onClick={handleClick}>Clickable Div</div>;
    }
    

14. Event Pooling:

    React uses an event pooling mechanism to improve performance. This means that the synthetic event object may be reused for multiple events. If you need to access the event properties asynchronously (for example, in a setTimeout), you should call event.persist() to remove the synthetic event from the pool.

15. 
    
इवेंट पूलिंग: रिएक्ट प्रदर्शन को बेहतर बनाने के लिए इवेंट पूलिंग तंत्र का उपयोग करता है। इसका मतलब यह है कि सिंथेटिक ईवेंट ऑब्जेक्ट का कई ईवेंट के लिए पुन: उपयोग किया जा सकता है। यदि आपको ईवेंट गुणों को एसिंक्रोनस रूप से एक्सेस करने की आवश्यकता है (उदाहरण के लिए, सेटटाइमआउट में), तो आपको event.persist()पूल से सिंथेटिक ईवेंट को हटाने के लिए कॉल करना चाहिए।
16. react event typescript

17. jsx
    function DelayedClickComponent() {
      const handleClick = (event) => {
        event.persist(); // Remove from event pool
        setTimeout(() => {
          console.log('Delayed click', event.target.tagName);
        }, 1000);
      };
    
      return <button onClick={handleClick}>Delayed Click</button>;
    }
    

Remember that while the examples above demonstrate the basic usage of React events, the specific implementation might vary depending on your use case and component structure. Always refer to the official React documentation for the most accurate and up-to-date information on handling events in React.

याद रखें कि जबकि ऊपर दिए गए उदाहरण रिएक्ट घटनाओं के मूल उपयोग को प्रदर्शित करते हैं, विशिष्ट कार्यान्वयन आपके उपयोग के मामले और घटक संरचना के आधार पर भिन्न हो सकता है। रिएक्ट में घटनाओं से निपटने के बारे में सबसे सटीक और अद्यतित जानकारी के लिए हमेशा आधिकारिक रिएक्ट दस्तावेज़ देखें।