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), ගුණාංගයේ අගය ලෙස මෙම ඉවෙන්ට් එක මත කැඳවනු ලබන ක්‍රමය නියම කෙරේ.

පහත කේතය ලබා දී ඇත:

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

පළමු බොත්තම මත ක්ලික් කළ විට පළමු කාර්යය ක්‍රියාත්මක වන අතර, දෙවන බොත්තම මත ක්ලික් කළ විට - දෙවන කාර්යය ක්‍රියාත්මක වන පරිදි සකසන්න.