JSX में इवेंट हैंडलिंग

आइए अब React में इवेंट के साथ काम करना सीखें। उदाहरण के लिए, आइए ऐसा करें कि एक ब्लॉक पर क्लिक करने पर कुछ टेक्स्ट के साथ एक alert दिखाई दे।

मान लीजिए कि हमारे पास एक फंक्शन showMess है, जो एक संदेश के साथ alert दिखाता है, और HTML कोड में एक बटन है, जिस पर क्लिक करने पर हमें यह alert देखना चाहिए:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

आइए हम अपने बटन से onclick इवेंट को बांधें ताकि इस डिव पर क्लिक करने पर फंक्शन showMess ट्रिगर हो। इसके लिए एट्रिब्यूट onClick जोड़ना होगा (और ठीक camelCase में, यानी onClick, न कि onclick), और इसमें वह फंक्शन निर्दिष्ट करना होगा जो इस इवेंट पर निष्पादित होगा:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

इस प्रकार इवेंट के साथ काम किया जाता है: एक एट्रिब्यूट जोड़ा जाता है (उदाहरण के लिए, onClick या onFocus), एट्रिब्यूट के मान के रूप में वह मethod निर्दिष्ट किया जाता है जो इस इवेंट पर कॉल किया जाएगा।

निम्नलिखित कोड दिया गया है:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

ऐसा करें कि पहले बटन पर क्लिक करने पर पहला फंक्शन ट्रिगर हो, और दूसरे बटन पर क्लिक करने पर दूसरा फंक्शन ट्रिगर हो।