React တွင် ဆင်းသက်‌သော component များ၏ state များမှတစ်ဆင့် အလုပ်လုပ်ပုံ modes

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါဝင်သော array သည် ယခုအခါ အောက်ပါအတိုင်း ဖြစ်ပါစေ။

jsxconst initProds = [
  {id: id(), name: 'prod1', cost: 'cost1', catg: 'catg1'},
  {id: id(), name: 'prod2', cost: 'cost2', catg: 'catg2'},
  {id: id(), name: 'prod3', cost: 'cost3', catg: 'catg3'},
];

ဤထုတ်ကုန်များကို HTML ဇယားအနေဖြင့် ထုတ်ပြကြပါစို့။ ထိုသို့လုပ်ဆောင်ရာတွင် ဇယား၏ မည်သည့်ဆဲလ်ကိုမဆို နှိပ်လိုက်သည့်အခါ ထိုဆဲလ်တွင် တည်းဖြတ်ရန် input တစ်ခု ပေါ်လာစေရန် ပြုလုပ်ပါမည်။ ပြဿနာကိုဖြေရှင်းရန် component ပေါင်း 3 ခုကို ပြုလုပ်ပါမည်။

Products component သည် ထုတ်ကုန်များနှင့်အတူ state ကို သိမ်းဆည်းထားပြီး ထုတ်ကုန်များကိုဖော်ပြရန် Product component များကို အသုံးပြုမည်။ Product component ကလည်း ထုတ်ကုန်၏အထူးကွက်လပ်တစ်ခု (နာမည်၊ ဈေး၊ အမျိုးအစား) ကိုဖော်ပြရန် ProductField component များကို အသုံးပြုမည်။

ProductField component သည် ကွက်လပ်၏စာသားကိုပြသခြင်း သို့မဟုတ် ၎င်းကိုတည်းဖြတ်ရန် input ကို ပြသမည်။ ထိုသို့ဖြစ်စေရန် တည်းဖြတ်ခြင်း သို့မဟုတ် ပြသခြင်း mode ကို ယခု component ၏ state မှ ထိန်းညှိပါစေ။

ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် mode ကို မိဘ component ၏ state တွင် သိမ်းဆည်းမည်မဟုတ်ပါ။ ထိုသို့လုပ်ဆောင်ခြင်းသည် အလွန်အဆင်မပြေဖြစ်စေမည်။ အကြောင်းမှာ ထုတ်ကုန်တစ်ခုချင်းစီ၏ ကွက်လပ်တိုင်းအတွက် mode ကိုသတ်မှတ်ရန်လိုအပ်မည်ဖြစ်ပြီး �ျွန်ုပ်တို့၏ state ကို အောက်ပါကဲ့သို့သောအရာတစ်ခုအဖြစ် ပြောင်းလဲသွားစေမည်။

jsxconst initProds = [
  [
    {field: 'name', value: 'prod1', isEdit: false},
    {field: 'cost', value: 'cost1', isEdit: false},
    {field: 'catg', value: 'catg1', isEdit: false},
  ],
  [
    {field: 'name', value: 'prod2', isEdit: false},
    {field: 'cost', value: 'cost2', isEdit: false},
    {field: 'catg', value: 'catg2', isEdit: false},
  ],
  [
    {field: 'name', value: 'prod3', isEdit: false},
    {field: 'cost', value: 'cost3', isEdit: false},
    {field: 'catg', value: 'catg3', isEdit: false},
  ],
]

သို့ရာတွင် ကျွန်ုပ်တို့သည် ထိုကဲ့သို့ state တစ်ခုကို မပြုလုပ်ဘဲ၊ ရှိပြီးသားဟောင်းကိုပင် ထားရှိပါမည်။ သာမန်အားဖြင့် ProductField component ၏ instance တစ်ခုစီသည် ၎င်း၏ကိုယ်ပိုင် state ကိုအသုံးပြု၍ mode ကို ထိန်းညှိမည်။ တည်းဖြတ်ခြင်း သို့မဟုတ် ပြသခြင်း။

ဤနည်းဖြင့် ရလဒ်အနေဖြင့် မိဘ component သည် ဒေတာများနှင့်အတူ state ကို သိမ်းဆည်းထားမည်ဖြစ်ပြီး၊ ကျွန်ုပ်တို့၏ မြစ်ဝှမ်း component သည် ထိုဒေတာများကို props များမှတစ်ဆင့် ရယူမည်ဖြစ်ကာ၊ ထိုသို့ဖြစ်စဉ်တွင် ၎င်း၏ mode ကိုပြောင်းလဲရန် ကိုယ်ပိုင် state ကို ပိုင်ဆိုင်မည်ဖြစ်သည်။

ထို့ကြောင့် ဖော်ပြပါအတိုင်း အကောင်အထည်ဖော်ကြပါစို့။

Products Component

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  function changeField(id, field, event) {
    setProds(prods.map(prod => {
      if (prod.id === id) {
        prod[field] = event.target.value;
      }
      
      return prod;
    }));
  }
  
  const rows = prods.map(prod => {
    return <Product
      key ={prod.id}
      id  ={prod.id}
      name={prod.name}
      cost={prod.cost}
      catg={prod.catg}
      changeField={changeField}
    />;
  });
  
  return <div>
    <table>
      <tbody>
        {rows}
      </tbody>
    </table>
  </div>;
}

Product Component

jsxfunction Product({ id, name, cost, catg, changeField }) {
  return <tr>
    <ProductField id={id} text={name} type="name" changeField={changeField} />
    <ProductField id={id} text={cost} type="cost" changeField={changeField} />
    <ProductField id={id} text={catg} type="catg" changeField={changeField} />
  </tr>;
}

ProductField Component

jsxfunction ProductField({ id, text, type, changeField }) {
  const [isEdit, setIsEdit] = useState(false);
  
  return <td>
    {
      isEdit
      ? <input
        value={text}
        onChange={event => changeField(id, type, event)}
        onBlur={() => setIsEdit(false)}
      />
      : <span onClick={() => setIsEdit(true)}>{text}</span>
    }
  </td>;
}

လက်တွေ့လေ့ကျင့်ခန်းများ