အဖြစ်အပျက်များကို တုံ့ပြန်ပါ။
HTML DOM ဖြစ်ရပ်များကဲ့သို့ပင်၊ React သည် သုံးစွဲသူဖြစ်ရပ်များအပေါ် အခြေခံ၍ လုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်သည်။
React တွင် HTML ကဲ့သို့ တူညီသော ဖြစ်ရပ်များ ပါရှိသည်- ကလစ်၊ ပြောင်းလဲခြင်း၊ မောက်စ်တင်ခြင်း စသည်တို့ ဖြစ်သည်။
ပွဲများထည့်ခြင်း။
တုံ့ပြန်သည့် ဖြစ်ရပ်များကို camelCase အထားအသို ဖြင့် ရေးသားထားသည်။
onClick
အစား onclick
.
React event handlers များကို curly braces အတွင်းတွင် ရေးထားသည်-
onClick={shoot}
အစား
onClick="shoot()"
.
တုံ့ပြန်မှု-
<button onClick={shoot}>Take the Shot!</button>
HTML-
<button onclick="shoot()">Take the Shot!</button>
ဥပမာ-
shoot
လုပ်ဆောင်ချက်ကို အစိတ်အပိုင်းအတွင်း ထည့်
သွင်း Football
ပါ-
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
စကားဖြတ်ခြင်း
အငြင်းအခုံတစ်ခုအား ဖြစ်ရပ်ကိုင်တွယ်သူထံပေးပို့ရန် မြှားလုပ်ဆောင်ချက်ကို အသုံးပြုပါ။
ဥပမာ-
"ပန်းတိုင်!" shoot
မြှားလုပ်ဆောင်ချက်ကို အသုံးပြု၍ လုပ်ဆောင်ချက် အတွက် ကန့်သတ်ချက်တစ်ခုအနေဖြင့် ၊
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
Event Object ကို တုံ့ပြန်ပါ။
လုပ်ဆောင်ချက်ကို စတင်လုပ်ဆောင်သည့် လုပ်ဆောင်ချက်ကို ကိုင်တွယ်ဖြေရှင်းသူများသည် တုံ့ပြန်သည့်ဖြစ်ရပ်သို့ ဝင်ရောက်ခွင့်ရှိသည်။
ကျွန်ုပ်တို့၏ဥပမာတွင်ဖြစ်ရပ်သည် "ကလစ်" ဖြစ်ရပ်ဖြစ်သည်။
ဥပမာ-
Arrow Function- ဖြစ်ရပ်အရာဝတ္တုကို ကိုယ်တိုင်ပေးပို့ခြင်း-
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
}
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
ReactDOM.render(<Football />, document.getElementById('root'));
နောက်ပိုင်းအခန်း တွင် Form ကို ကြည့်သောအခါ ၎င်းသည် အဆင်ပြေ ပါသည်။