JSX ရှိ ဖြစ်ရပ်များကို ချိတ်ဆက်ခြင်း

ယခု React တွင် ဖြစ်ရပ်များနှင့် အလုပ်လုပ်ပုံကို လေ့လာကြပါစို့။ ဥပမာအားဖြင့်၊ block တစ်ခုကို ကလစ်နှိပ်လိုက်သည့်အခါ အချို့သော စာသားဖြင့် alert ထွက်ပေါ်လာစေရန် လုပ်ဆောင်ကြည့်ပါမည်။

ကျွန်ုပ်တို့တွင် alert ကို မက်ဆေ့ချ်တစ်ခုနှင့် ထုတ်ပေးသည့် showMess function တစ်ခု ရှိပါစေ၊ ထို့အပြင် HTML ကုဒ်ထဲတွင် ခလုတ်တစ်ခုရှိပြီး ၎င်းကို ကလစ်နှိပ်လိုက်သည့်အခါ ထို alert ကို မြင်တွေ့လိုပါသည်:

function App() {
	function showMess() {
		alert('မင်္ဂလာပါ');
	}
	
	return <div>
		<button>ပြပါ</button>
	</div>;
}

ကျွန်ုပ်တို့၏ ခလုတ်သို့ onclick ဖြစ်ရပ်ကို ဤ div အပေါ် ကလစ်နှိပ်လိုက်သည့်အခါ showMess function ကို လုပ်ဆောင်စေမည့် နည်းဖြင့် ချိတ်ဆက်ကြပါစို့။ ထိုသို့ပြုလုပ်ရန် attribute တစ်ခုကို ထည့်ရမည် onClick (camelCase ပုံစံဖြစ်ရမည်၊ ဆိုလိုသည်မှာ onClick ဖြစ်ပြီး onclick မဟုတ်ပါ) ထို့နောက် ဤဖြစ်ရပ်ဖြစ်ပွားသည့်အခါ လုပ်ဆောင်မည့် function ကို ထို attribute ၏တန်ဖိုးအဖြစ် သတ်မှတ်ပေးရမည်:

function App() {
	function showMess() {
		alert('မင်္ဂလာပါ');
	}
	
	return <div>
		<button onClick={showMess}>ပြပါ</button>
	</div>;
}

ဤနည်းအတိုင်းပင် ဖြစ်ရပ်များနှင့် အလုပ်လုပ်ခြင်း ဖြစ်ပွားပါသည်: attribute တစ်ခု ထည့်သွင်းခြင်း (ဥပမာ onClick သို့မဟုတ် onFocus)၊ attribute ၏တန်ဖိုးအဖြစ် ထိုဖြစ်ရပ်ဖြစ်ပွားသည့်အခါ ခေါ်ယူမည့် method ကို သတ်မှတ်ပေးခြင်း။

အောက်ပါကုဒ်ကို ပေးထားသည်:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>လုပ်ဆောင်ချက် 1</button>
		<button>လုပ်ဆောင်ချက် 2</button>
	</div>;
}

ပထမခလုတ်ကို ကလစ်နှိပ်လိုက်သည့်အခါ ပထမ function ကို လုပ်ဆောင်စေပြီး၊ ဒုတိယခလုတ်ကို ကလစ်နှိပ်လိုက်သည့်အခါ ဒုတိယ function ကို လုပ်ဆောင်စေရန် ပြုလုပ်ပါ။