SyntheticEvent की समझ
SyntheticEvent React का universal remote control है browser events के लिए, same तरीके से काम करते हुए चाहे आप किसी भी browser use कर रहे हों।
In this page:
Syntax
function handler(event) {
event.preventDefault(); // stop default browser action
console.log(event.target); // element that triggered it
}
<element onEvent={handler} />SyntheticEvent क्या Provide करता है
React में हर event handler raw browser event के बजाय एक SyntheticEvent object receive करता है। यह browsers भर में consistently behave करता है और वही familiar methods और properties include करता है जो आप expect करेंगे, जैसे .target और .preventDefault()।
Note:
आपको शायद ही कभी SyntheticEvent के बारे में explicitly सोचने की ज़रूरत पड़े -- बस इसे वैसे ही use करें जैसे आप एक normal DOM event use करते।
Warning:
React 17 से पहले के versions में, SyntheticEvent objects pooled और reused थे, इसलिए उन्हें asynchronously access करने के लिए extra care चाहिए था -- यह React 17+ में remove कर दिया गया।
उदाहरण: What SyntheticEvent Provides
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ClickLogger() {
function handleClick(event) {
console.log("Event type:", event.type);
}
return <button onClick={handleClick}>Click and check console</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ClickLogger />);
</script>
</body>
</html>Default Behavior Prevent करना
एक SyntheticEvent पर event.preventDefault() call करना उस event के लिए browser के default action को रोकता है, जैसे एक form submit होना और page reload होना, या एक link navigate away होना। यह exactly वैसे ही काम करता है जैसे यह native DOM events के साथ करता है।
Note:
अगर आप JavaScript से खुद submission manage कर रहे हैं तो form submit handlers पर हमेशा
preventDefault() call करें।Warning:
एक form के submit handler पर
preventDefault() भूल जाना page को reload करने का कारण बनता है, किसी भी React state को wipe out करते हुए।उदाहरण: Preventing Default Behavior
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Form() {
function handleSubmit(event) {
event.preventDefault();
alert("Form submitted without reloading the page!");
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Form />);
</script>
</body>
</html>event.target Access करना
event.target उस actual DOM element को refer करता है जिसने event trigger किया, आपको इसकी properties जैसे एक input field के लिए value का access देते हुए। यह user ने क्या typed या select किया पढ़ने का सबसे common तरीका है।
Note:
Text inputs के लिए,
event.target.value एक onChange handler के अंदर current typed value पढ़ने का standard तरीका है।Warning:
Checkboxes के लिए, आपको correct boolean state पाने के लिए
event.target.value के बजाय event.target.checked चाहिए।उदाहरण: Accessing event.target
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function NameInput() {
const [name, setName] = React.useState("");
return (
<div>
<input onChange={(e) => setName(e.target.value)} placeholder="Type your name" />
<p>You typed: {name}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<NameInput />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह मान लेना कि SyntheticEvent में native event से कम features हैं -- यह almost everything wrap करता है जो native event provide करता है।
- Handler finish होने के बाद बाद में use के लिए event object store करना, older React versions में (यह pooled और reused था)।
- SyntheticEvent method names को native DOM event methods के साथ confuse करना, जो mostly same हैं लेकिन double-check करने लायक हैं।
चैप्टर सारांश
- React native browser events को एक cross-browser SyntheticEvent object में wrap करता है।
- SyntheticEvent अलग browsers भर में consistent behavior provide करता है।
.preventDefault()और.stopPropagation()जैसे common methods expected तरीके से काम करते हैं।- आप underlying native event को
event.nativeEventके through access करते हैं अगर कभी चाहिए।
ब्राउज़र सपोर्ट
सभी modern browsers भर में consistent behavior exactly SyntheticEvent का purpose है; event pooling React 17+ में remove कर दी गई, async event access को simplify करते हुए।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: