मध्ये परस्परसंवादी आणि डायनॅमिक वापरकर्ता इंटरफेस तयार करण्यात इव्हेंट महत्त्वाची भूमिका बजावतात 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: ही घटना घडते जेव्हा इनपुट घटकाचे मूल्य(इनपुट, सिलेक्ट, टेक्स्टेरिया) बदलते.
उदाहरण:
<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.