React Router တွင် URL parameter များအား အချက်အလက်များ ရေးသားခြင်းနှင့် တည်းဖြတ်ခြင်း

ကျွန်ုပ်တို့၏ application သည် ယခုအခါ ကုန်ပစ္စည်းတစ်ခုချင်းစီအတွက် အချက်အလက်များကို သိုလှောင်ရာမှ ဆွဲယူနိုင်ပါပြီ။ ဤသင်ခန်းစာတွင် ကုန်ပစ္စည်းအချက်အလက် ထည့်သွင်းခြင်းနှင့် ၎င်းကို URL parameter များမှတစ်ဆင့် တည်းဖြတ်ခြင်းကို အကောင်အထည်ဖော်ရန် စတင်ပါမည်။

အချက်အလက်များထည့်သွင်းရန် သို့မဟုတ် ပြောင်းလဲရန်အတွက် ကျွန်ုပ်တို့သည် Form component ကို ထပ်မံအသုံးပြုပါမည်။ စတင်ရန် အနေဖြင့် product.jsx ကိုဖွင့်ပြီး ကုန်ပစ္စည်း၏ အချက်အလက်များကို တည်းဖြတ်ရန် ခလုတ်တစ်ခုကို layout ၏ နောက်ဆုံးတွင် ထည့်ပါ - နောက်ဆုံးစာပိုဒ်အပြီးတွင် (Form ကို ဖိုင်ထဲသို့ import လုပ်ရန်မမေ့ပါနှင့်) -

<Form action="edit">
	<button type="submit">တည်းဖြတ်ရန်</button>
</Form>

ယခုအခါ ကျွန်ုပ်တို့၏ ကုန်ပစ္စည်းစာမျက်နှာတွင် ခလုတ်တစ်ခုရှိပါပြီ။ နောက်တစ်ဆင့်အနေဖြင့် ဤခလုတ်ကိုနှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့ကို ဖောင်ပုံစံရှိသော စာမျက်နှာသို့ ခေါ်ဆောင်သွားမည့် လုပ်ဆောင်ချက်ကို ပြုလုပ်ပါမည်။ ထိုနေရာတွင် ကျွန်ုပ်တို့သည် အချက်အလက်များကို ထည့်သွင်းနိုင်ပါမည်။ ဤအတွက် ကျွန်ုပ်တို့သည် products/:productId/edit နှင့် လမ်းကြောင်း (route) အသစ်တစ်ခု ဖန်တီးပါမည်။ ဤအတွက် layout တစ်ခုဖန်တီးပါစို့။

ထို့ကြောင့် routes ဖိုဒါအတွင်း ဖိုင် အသစ် edit.jsx ကိုဖန်တီးပါမည်။ ဤနေရာတွင် ကျွန်ုပ်တို့ထံ name, cost နှင့် amount အတွက် ဖြည့်ရန် နေရာများ ပါဝင်သော ဖောင်ပုံစံနှင့် သိမ်းဆည်းရန် ခလုတ်တစ်ခုပါဝင်မည်။ ဤအရာအားလုံးကို EditProduct component အတွင်း ထည့်သွင်းပါမည်။ name attributes များကို မဖြစ်မနေ ရေးသားထားပါ၊ ၎င်းတို့ကို နောက်လာမည့် သင်ခန်းစာများတွင် အသုံးပြုရန်လိုအပ်ပါမည် -

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>နာမည်:</span>
				<input placeholder="နာမည်" type="text" name="name" />
			</div>
			<div>
				<span>ကုန်ကျစရိတ်:</span>
				<input placeholder="ကုန်ကျစရိတ်" type="text" name="cost" />
			</div>
			<div>
				<span>အရေအတွက်:</span>
				<input placeholder="အရေအတွက်" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">သိမ်းဆည်းရန်</button>
			</p>
		</Form>
	);
}

export default EditProduct;

ယခင်သင်ခန်းစာများအတွက် သတ်မှတ်ချက်များတွင် သင်ဖန်တီးခဲ့သော application ကိုယူပါ။ သင်ခန်းစာ၏ ပစ္စည်းများကို အသုံးပြု၍ ကျောင်းသား၏ အချက်အလက်များကို တည်းဖြတ်ရန် ခလုတ်တစ်ခုထည့်ပါ။ တည်းဖြတ်ရန် edit.jsx ဖိုင်ကိုဖန်တီးပါ။ ထိုဖိုင်တွင် EditStudent လုပ်ဆောင်ချက်ပါရှိပြီး ၎င်းအတွင်း ကျောင်းသားအချက်အလက်များဖြည့်ရန် ဖောင်ပုံစံတစ်ခုပါဝင်ပါမည်။