React useState
Hook
React useState
Hook သည် ကျွန်ုပ်တို့အား လုပ်ဆောင်ချက် အစိတ်အပိုင်းတစ်ခုတွင် အခြေအနေကို ခြေရာခံနိုင်စေပါသည်။
State သည် ယေဘုယျအားဖြင့် အက်ပလီကေးရှင်းတစ်ခုတွင် ခြေရာခံရန် လိုအပ်သည့် အချက်အလက် သို့မဟုတ် ပိုင်ဆိုင်မှုများကို ရည်ညွှန်းသည်။
သွင်းကုန်useState
useState
Hook ကိုအသုံးပြုရန်၊ ကျွန်ုပ်တို့သည် ၎င်းကို ကျွန်ုပ်တို့၏ import
အစိတ်အပိုင်းတွင် ဦးစွာပြုလုပ်ရန် လိုအပ်ပါသည်။
ဥပမာ-
သင်၏အစိတ်အပိုင်း၏ထိပ်တွင်၊ import
Hook useState
။
import { useState } from "react";
ကျွန်ုပ်တို့သည် အမည်ပေးထားသော ပို့ကုန်တစ်ခုဖြစ်သောကြောင့် ပျက်ပြားသွားကြောင်း သတိပြုပါ useState
။react
ပျက်စီးခြင်းအကြောင်းပိုမိုလေ့လာရန်၊ ES6 ကဏ္ဍကို ကြည့်ရှုပါ ။
စတင်လိုက်ပါ။ useState
useState
ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက်အစိတ်အပိုင်းကို ခေါ်ဆိုခြင်းဖြင့် ကျွန်ုပ်တို့၏အခြေအနေကို စတင် လုပ်ဆောင်ပါသည်။
useState
ကနဦးအခြေအနေတစ်ခုကို လက်ခံပြီး တန်ဖိုးနှစ်ခုကို ပြန်ပေးသည်-
- လက်ရှိအခြေအနေ။
- ပြည်နယ်ကို အပ်ဒိတ်လုပ်သည့် လုပ်ဆောင်ချက်။
ဥပမာ-
လုပ်ဆောင်ချက်အစိတ်အပိုင်း၏ထိပ်တွင် အခြေအနေကို စတင်ပါ။
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
ကျွန်ုပ်တို့သည် ပြန်လာသောတန်ဖိုးများကို ဖျက်ပစ်နေသည်ကိုလည်း ထပ်မံသတိပြုပါ useState
။
ပထမတန်ဖိုး color
သည် ကျွန်ုပ်တို့၏လက်ရှိအခြေအနေဖြစ်သည်။
ဒုတိယတန်ဖိုး၊ setColor
၊ သည် ကျွန်ုပ်တို့၏ပြည်နယ်ကို မွမ်းမံရန်အတွက် အသုံးပြုသည့် fuction ဖြစ်သည်။
ဤအမည်များသည် သင်နှစ်သက်သလို အမည်ပေးနိုင်သော ကိန်းရှင်များဖြစ်သည်။
နောက်ဆုံးအနေဖြင့်၊ ကျွန်ုပ်တို့သည် ကနဦးအခြေအနေအား ဗလာစာကြောင်းအဖြစ် သတ်မှတ်သည်- useState("")
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
ပြည်နယ်ဖတ်ပါ။
ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏အစိတ်အပိုင်းတွင် မည်သည့်နေရာတွင်မဆို ကျွန်ုပ်တို့၏ပြည်နယ်ကို ယခုထည့်သွင်းနိုင်ပြီဖြစ်သည်။
ဥပမာ-
ပြန်ဆိုထားသော အစိတ်အပိုင်းရှိ state variable ကိုသုံးပါ။
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
ပြည်နယ်ကို အပ်ဒိတ်လုပ်ပါ။
ကျွန်ုပ်တို့၏ပြည်နယ်ကို အပ်ဒိတ်လုပ်ရန်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ပြည်နယ် အဆင့်မြှင့်တင်မှုလုပ်ဆောင်ချက်ကို အသုံးပြုပါသည်။
ကျွန်ုပ်တို့သည် အခြေအနေကို တိုက်ရိုက်မွမ်းမံခြင်းမပြုသင့်ပါ။ ဥပမာ- color = "red"
ခွင့်မပြုပါ။
ဥပမာ-
အခြေအနေကို အပ်ဒိတ်လုပ်ရန် ခလုတ်ကို အသုံးပြုပါ-
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
နိုင်ငံတော်က ဘယ်လိုထိန်းထားနိုင်မလဲ။
Hook သည် useState
strings များ၊ နံပါတ်များ၊ booleans ၊ arrays ၊ objects နှင့် မည်သည့်ပေါင်းစပ်မှုကိုမဆို ခြေရာခံရန် အသုံးပြုနိုင်သည်။
တစ်ဦးချင်းတန်ဖိုးများကိုခြေရာခံရန် state Hooks အများအပြားကို ကျွန်ုပ်တို့ ဖန်တီးနိုင်သည်။
ဥပမာ-
များစွာသောပြည်နယ် Hooks ဖန်တီးပါ-
import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
သို့မဟုတ်၊ ကျွန်ုပ်တို့သည် ပြည်နယ်တစ်ခုကိုသာ အသုံးပြုနိုင်ပြီး ၎င်းအစား အရာဝတ္ထုတစ်ခုကို ထည့်သွင်းနိုင်သည်။
ဥပမာ-
အရာဝတ္ထုတစ်ခုကို ကိုင်ဆောင်ထားသည့် Hook တစ်ခုတည်းကို ဖန်တီးပါ-
import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
ယခု ကျွန်ုပ်တို့သည် အရာဝတ္ထုတစ်ခုတည်းကို ခြေရာခံနေသောကြောင့်၊ အစိတ်အပိုင်းကို တင်ဆက်သည့်အခါ ထိုအရာဝတ္တုကို ကိုးကားပြီး ထိုအရာဝတ္ထု၏ ပိုင်ဆိုင်မှုကို လိုအပ်ပါသည်။ (ဥပမာ car.brand
)
ပြည်နယ်ရှိ အရာဝတ္ထုများနှင့် Array များကို အပ်ဒိတ်လုပ်ခြင်း။
ပြည်နယ်ကို အပ်ဒိတ်လုပ်သောအခါ၊ ပြည်နယ်တစ်ခုလုံးကို အစားထိုးရေးသားပါမည်။
ကျွန်ုပ်တို့၏ကား၏အရောင်ကိုသာ အပ်ဒိတ်လုပ်လိုလျှင်ကော။
အကယ်၍ ကျွန်ုပ်တို့သာခေါ်ဆို ပါက setCar({color: "blue"})
၊ ၎င်းသည် အမှတ်တံဆိပ်၊ မော်ဒယ်နှင့် နှစ်တို့ကို ကျွန်ုပ်တို့နိုင်ငံမှ ဖယ်ရှားမည်ဖြစ်သည်။
ကျွန်ုပ်တို့ကိုကူညီရန် JavaScript ဖြန့်ကျက်အော်ပရေတာကို အသုံးပြုနိုင်သည်။
ဥပမာ-
ကား၏အရောင်ကိုသာ အပ်ဒိတ်လုပ်ရန် JavaScript ဖြန့်အော်ပရေတာကို သုံးပါ-
import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
ကျွန်ုပ်တို့သည် နိုင်ငံတော်၏ လက်ရှိတန်ဖိုးကို လိုအပ်သောကြောင့်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏လုပ်ဆောင်ချက်သို့ setCar
လုပ်ဆောင်ချက်တစ်ခုကို ပေးပို့ပါသည်။ ဤလုပ်ဆောင်ချက်သည် ယခင်တန်ဖိုးကို ရရှိသည်။
ထို့နောက် ကျွန်ုပ်တို့သည် အရာဝတ္တုတစ်ခုကို ပြန်၍ ဖြန့် previousState
ကာ အရောင်ကိုသာ ထပ်ရေးသည်။