Redux တွင် ပုံစံထည့်သွင်းခြင်း

အရင် သင်ခန်းစာမှာ ပုံစံအတွက် အင်ပါ့ဖီးလ် (input fields) တွေကို ကွန်ပိုနင့် တစ်ခုတည်းအတွင်းမှာ အလုပ်လုပ်မယ့် စတိတ် (states) တွေနဲ့ အသုံးပြုလို့ရတယ်ဆိုတာ သိခဲ့ပြီး၊ ဗလာ ပုံစံတစ်ခု ဖန်တီးခဲ့ပါတယ်။

အခုတော့ form တဂ်တွေ အတွင်းမှာ အချက်အလက် ထည့်သွင်းမယ့် အင်ပါ့ဖီးလ် တစ်ခုချင်းစီအတွက် ဗားရှင်း (markup) တွေ ထည့်ရအောင်။ ပထမဆုံး အင်ပါ့ဟာ ထုတ်ကုန်အမည်အတွက် ဖြစ်ပြီး၊ သူ့ရဲ့ ဗားရှင်းက ဒီလိုဖြစ်ပါမယ်။

products/NewProductForm.jsx<form>
  <p>
    <label htmlFor="productName">နာမည်:</label>
    <input
      id="productName"
      name="productName"
      value={name}
      onChange={onNameChanged}
    />
  </p>
</form>

ဒုတိယအနေနဲ့ ထုတ်ကုန်ဖော်ပြချက်အတွက် textarea ဖြစ်ပါမယ်။

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">ဖော်ပြချက်:</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

ကျန်နေသေးတဲ့ အင်ပါ့နှစ်ခုအတွက်၊ productPrice နှင့် productAmount ဆိုတဲ့ ID တွေနဲ့ ဈေးနှုန်းနှင့် အရေအတွက်အတွက် ကုဒ်ကို သင်ကိုယ်တိုင် ရေးပါ။

အင်ပါ့လေးခု အားလုံးပြီးတဲ့နောက်၊ ပိတ်တဲ့ form တဂ်မတိုင်မီ သိမ်းဖို့ ခလုတ်လေးတစ်ခု ထည့်ပါ။

products/NewProductForm.jsx<button type="button">သိမ်းမည်</button>

ကျွန်ုပ်တို့ရဲ့ ပုံစံနဲ့ပါကွန်ပိုနင့် အဆင်သင့်ဖြစ်ပါပြီ။ သူ့ကို အဓိက စာမျက်နှာမှာ ပြသရအောင်။ ဒီအတွက် root.jsx ဖိုင်ကို ဖွင့်ပြီး၊ ကွန်ပိုနင့်ကို အင်ပို့ (import) လုပ်ပါမယ်။

app/root.jsximport { NewProductForm } from '../parts/products/NewProductForm'

ပြီးတော့ သူ့ကို hr တဂ်နဲ့ ProductsList ကွန်ပိုနင့်ကြားမှာ ဒီလိုနည်းနဲ့ ထည့်ပါမယ်။

app/root.jsx<hr></hr>
<NewProductForm />
<ProductsList />

ကျွန်ုပ်တို့ရဲ့ အပ်ပလီကေးရှင်း (application) ကို စတင်လည်ပတ်ပြီး ပုံစံနဲ့ ထုတ်ကုန်စာရင်းကို ကြည့်ရှုကြည့်ရအောင်။ index.css ထဲမှာ စတိုင်တွေ ထပ်ထည့်ကြမယ်။

index.css#main-page {
  max-width: 600px;
}

select,
textarea,
input,
button {
  font-size: 18px;
}

form {
  margin-bottom: 20px;
  border-bottom: 2px solid lightgray;
  padding-bottom: 10px;
}

form p {
  margin: 5px;
}