घटनाहरूले अन्तरक्रियात्मक र गतिशील प्रयोगकर्ता इन्टरफेसहरू सिर्जना गर्न महत्त्वपूर्ण भूमिका खेल्छ React । यस ट्यूटोरियलमा, हामी घटनाहरू कसरी ह्यान्डल गर्ने React र प्रयोगकर्ताका कार्यहरूलाई प्रभावकारी रूपमा प्रतिक्रिया दिने भनेर अन्वेषण गर्नेछौं।
JSX मा घटना ह्यान्डलिङ
React एक सिंथेटिक घटना प्रणाली प्रदान गर्दछ जसले नेटिभ ब्राउजर घटनाहरूलाई लपेट्छ र तिनीहरूलाई विभिन्न ब्राउजरहरूमा सामान्य बनाउँछ। हामी एट्रिब्युट प्रयोग गरेर घटना ह्यान्डलरहरूलाई सीधा JSX तत्वहरूमा संलग्न गर्न सक्छौं onEventName ।
उदाहरण:
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: यो घटना तब हुन्छ जब इनपुट तत्व(इनपुट, चयन, textarea) को मान परिवर्तन हुन्छ।
उदाहरण:
<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 तपाइँ यी घटनाहरू प्रयोग गर्न सक्नुहुन्छ वा तपाइँको अनुप्रयोगमा तपाइँको आवश्यकता अनुसार अनुकूलन घटनाहरू सिर्जना गर्न सक्नुहुन्छ ।