इवेंट इंटरैक्टिव और गतिशील यूजर इंटरफेस बनाने में महत्वपूर्ण भूमिका निभाते हैं React । इस ट्यूटोरियल में, हम यह पता लगाएंगे कि घटनाओं को कैसे संभालें React और उपयोगकर्ता के कार्यों का प्रभावी ढंग से जवाब कैसे दें।
JSX में इवेंट हैंडलिंग
React एक सिंथेटिक ईवेंट सिस्टम प्रदान करता है जो मूल ब्राउज़र ईवेंट को लपेटता है और विभिन्न ब्राउज़रों में उन्हें सामान्य बनाता है। onEventName हम विशेषता का उपयोग करके इवेंट हैंडलर को सीधे JSX तत्वों से जोड़ सकते हैं ।
उदाहरण:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
इवेंट हैंडलर और इवेंट ऑब्जेक्ट
जब कोई ईवेंट ट्रिगर होता है, तो React स्वचालित रूप से ईवेंट ऑब्जेक्ट को ईवेंट हैंडलर फ़ंक्शन में भेज दिया जाता है। हम घटना के बारे में अतिरिक्त जानकारी प्राप्त करने के लिए इस ऑब्जेक्ट तक पहुंच सकते हैं, जैसे लक्ष्य तत्व, माउस निर्देशांक इत्यादि।
उदाहरण:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
बाइंडिंग इवेंट हैंडलर
इवेंट हैंडलर को प्रॉप्स के रूप में पास करते समय, उन्हें घटक इंस्टेंस से बांधना महत्वपूर्ण है। this यह सुनिश्चित करता है कि ईवेंट ट्रिगर होने पर सही संदर्भ बनाए रखा जाता है।
उदाहरण:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
घटना का प्रसार और डिफ़ॉल्ट कार्रवाइयों को रोकना
React एक सिंथेटिक इवेंट सिस्टम का उपयोग करता है जो स्वचालित रूप से इवेंट प्रसार को संभालता है। डिफ़ॉल्ट ब्राउज़र व्यवहार, जैसे फ़ॉर्म सबमिशन या लिंक नेविगेशन को रोकने के लिए, हम event.preventDefault() विधि को कॉल कर सकते हैं।
उदाहरण:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>यह समझकर कि घटनाओं को कैसे संभालना है React, आप इंटरैक्टिव और उत्तरदायी उपयोगकर्ता इंटरफ़ेस बना सकते हैं जो उपयोगकर्ता की गतिविधियों पर सहजता से प्रतिक्रिया देता है
यहां सामान्य घटनाओं की एक सूची दी गई है React
1. onClick: यह घटना तब घटित होती है जब किसी तत्व पर क्लिक किया जाता है।
उदाहरण:
<button onClick={handleClick}>Click Here</button> 2. onChange: यह घटना तब होती है जब इनपुट तत्व(इनपुट, सेलेक्ट, टेक्स्टएरिया) का मान बदलता है।
उदाहरण:
<input type="text" onChange={handleChange} /> 3. onSubmit: यह घटना तब होती है जब कोई फॉर्म सबमिट किया जाता है। उदाहरण:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: यह घटना तब घटित होती है जब माउस पॉइंटर किसी तत्व में प्रवेश करता है।
उदाहरण:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: यह घटना तब होती है जब माउस पॉइंटर एक तत्व छोड़ता है।
उदाहरण:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: यह घटना तब घटित होती है जब किसी कुंजी को दबाया जाता है।
उदाहरण:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: यह घटना तब घटित होती है जब कोई कुंजी जारी की जाती है।
उदाहरण:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: यह घटना तब घटित होती है जब कोई तत्व फोकस प्राप्त करता है।
उदाहरण:
<input type="text" onFocus={handleFocus} /> 9. onBlur: यह घटना तब घटित होती है जब कोई तत्व फोकस खो देता है।
उदाहरण:
<input type="text" onBlur={handleBlur} /> 10. onScroll: यह घटना तब होती है जब किसी तत्व को स्क्रॉल किया जाता है।
उदाहरण:
<div onScroll={handleScroll}>Scrollable Content</div>
ये सामान्य घटनाओं के कुछ उदाहरण मात्र हैं React । React आप इन ईवेंट का उपयोग कर सकते हैं या अपने एप्लिकेशन में अपनी आवश्यकताओं के अनुसार कस्टम ईवेंट बना सकते हैं।