React में Events को Handle करना
React में events handle करना एक doorbell button को एक specific job assign करने जैसा है, ताकि कुछ exactly तब हो जब इसे press किया जाए।
Syntax
<element onClick={handlerFunction} />
<element onClick={() => handlerFunction(argument)} />
<element onChange={handlerFunction} onMouseEnter={handlerFunction} />एक Click Handler Attach करना
एक click का response देने के लिए, एक JSX element पर onClick prop को एक function pass करें। React उस function को तब call करता है जब भी user element पर click करता है, आपको manually एक browser event listener add या remove करने की ज़रूरत के बिना।
Note:
Readability के लिए handler को
return statement के ऊपर एक named function के रूप में define करें, इसे हमेशा inline करने के बजाय।Warning:
onClick={handleClick()} लिखना function को click होने पर के बजाय render के दौरान immediately call करता है -- हमेशा function खुद pass करें, इसका result नहीं।उदाहरण: Attaching a Click Handler
<!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 ClickMe() {
function handleClick() {
alert("Button clicked!");
}
return <button onClick={handleClick}>Click Me</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ClickMe />);
</script>
</body>
</html>एक Handler को Arguments Pass करना
जब एक handler को extra information चाहिए, जैसे कौन सी item clicked थी, इसे एक inline arrow function में wrap करें ताकि आप इसे arguments के साथ call कर सकें। यह immediately function call करने से बचता है जबकि अब भी custom data pass करने देता है।
Note:
जब भी आपके handler को surrounding scope से एक value चाहिए
onClick={() => handleClick(item)} उपयोग करें।Warning:
onClick={handleClick(item)} लिखना (arrow function के बिना) इसे हर render पर immediately call करता है, click पर के बजाय।उदाहरण: Passing Arguments to a Handler
<!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 FruitList() {
function handlePick(fruit) {
alert("You picked: " + fruit);
}
return (
<div>
<button onClick={() => handlePick("Apple")}>Apple</button>
<button onClick={() => handlePick("Banana")}>Banana</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<FruitList />);
</script>
</body>
</html>Common Event Types
onClick के अलावा, React almost हर DOM event के लिए handlers support करता है: input changes के लिए onChange, form submissions के लिए onSubmit, hover के लिए onMouseEnter/onMouseLeave, और कई और।
सभी same camelCase-prop, function-reference pattern follow करते हैं।
Note:
ज़्यादातर editors में एक JSX element के opening tag पर hover करने से available event props के लिए autocomplete suggestions दिखती हैं।
Warning:
कुछ events अपने HTML equivalents से थोड़ा अलग behave करते हैं -- उदाहरण के लिए, React का
onChange हर keystroke पर fire होता है, native DOM change event के विपरीत जो blur पर fire होता है।उदाहरण: Common Event Types
<!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 HoverBox() {
const [hovering, setHovering] = React.useState(false);
return (
<div
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
style={{padding: "20px", background: hovering ? "lightyellow" : "white"}}
>
{hovering ? "Hovering!" : "Hover over me"}
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<HoverBox />);
</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. #}
आम गलतियां
- JSX में function को immediately call करना (
onClick={handleClick()}) एक reference pass करने के बजाय (onClick={handleClick})। - यह भूल जाना कि event handler prop names camelCase हैं (
onClick, न किonclick)। - एक plain HTML जैसा event listener attach करने की कोशिश करना, एक inline string के साथ जैसे
onclick="doSomething()"।
चैप्टर सारांश
- React event handlers
onClickऔरonChangeजैसे camelCase props के रूप में pass किए जाते हैं। - आप handler को एक function reference pass करते हैं, function call नहीं।
- Inline arrow functions commonly उन handlers के लिए use होते हैं जिन्हें arguments चाहिए।
- React native browser events को अपने own SyntheticEvent system में wrap करता है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- React का synthetic event system सभी supported browsers में behavior normalize करता है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: