React ရှိ အရာဝတ္ထုများ၏ Array များအပေါ် တုံ့ပြန်မှုဆိုင်ရာ လုပ်ဆောင်ချက်များ
ယခု အရာဝတ္ထုများ၏ array များအပေါ် တုံ့ပြန်မှုဆိုင်ရာ လုပ်ဆောင်ချက်များ ပြုလုပ်နည်းကို သင်ယူကြပါစို့။ ဤအခြေအနေတွင် ကျွန်ုပ်တို့ လုပ်ဆောင်ရန် ရည်ရွယ်သည့် array အစိတ်အပိုင်း၏ id ကို function အတွင်းသို့ လွှဲပြောင်းပေးရမည်။
function App() {
const [notes, setNotes] = useState(initNotes);
const result = notes.map(note => {
return <li key={note.id}>
<span>{note.prop1}</span>
<span>{note.prop2}</span>
<span>{note.prop3}</span>
<button onClick={() => doSmth(note.id)}>
btn
</button>
</li>;
});
return <div>
<ul>
{result}
</ul>
</div>;
}
အစိတ်အပိုင်းတစ်ခုနှင့် တစ်စုံတစ်ရာ လုပ်ဆောင်ရန်အတွက်၊ ပထမဦးစွာ array တစ်ခုလုံးကို loop ဖြင့် ဖြတ်သန်းရှာဖွေခြင်းဖြင့် ၎င်းကို ရှာဖွေရမည်။
function App() {
...
function doSmth(id) {
setNotes(notes.map(note => {
if (note.id === id) {
// အစိတ်အပိုင်းနှင့် တစ်စုံတစ်ရာ လုပ်ဆောင်ပါ
}
return note;
}));
}
}
ဥပမာအနေဖြင့် ရှာဖွေတွေ့ရှိသော အရာဝတ္ထု၏ စာသားများကို ပြောင်းလဲကြည့်ပါစို့။
function App() {
...
function doSmth(id) {
setNotes(notes.map(note => {
if (note.id === id) {
note.prop1 += '!';
note.prop2 += '!';
note.prop3 += '!';
return note;
}
return note;
}));
}
}
li တစ်ခုစီ၏ နောက်ဆုံးတွင် button တစ်ခု ပြုလုပ်ပါ၊ ထို button ကို နှိပ်လိုက်သောအခါ ထို li သည် စာရင်းမှ ဖယ်ရှားသွားမည်ဖြစ်သည်။
Input သုံးခု ပေးထားပါသည်။ li တစ်ခုစီ၏ နောက်ဆုံးတွင် button တစ်ခု ပြုလုပ်ပါ၊ ထို button ကို နှိပ်လိုက်သောအခါ ထို li ၏ အရာဝတ္ထု၏ အချက်အလက်များသည် သက်ဆိုင်ရာ input များထဲသို့ ရောက်ရှိသွားမည်ဖြစ်သည်။
ယခင်လုပ်ဆောင်ချက်ကို input များနှင့်အတူ ဘေးတွင် button တစ်ခု ရှိစေရန် ပြင်ဆင်ပါ၊ ထို button ကို နှိပ်လိုက်သောအခါ input များ၏ အချက်အလက်များသည် သက်ဆိုင်ရာ li ထဲသို့ ရောက်ရှိသွားမည်ဖြစ်သည်။
