React တွင် မိဘ component ၏ state ကို ကလေး component မှ တည်းဖြတ်ခြင်း

ယခုကျွန်ုပ်တို့၏ ထုတ်ကုန်များကို input များဖြင့် တည်းဖြတ်ကြပါစို့။ ဤအတွက် ကလေး component ထဲတွင် ခလုတ်တစ်ခု ပြုလုပ်ကြမည်။

ဤခလုတ်ကို ပထမအကြိမ်နှိပ်လိုက်သည့်အခါ ထုတ်ကုန်နှင့်အတူ အမည်နှင့် စျေးနှုန်းအစား ၎င်းတို့ကို တည်းဖြတ်ရန် input များ ပေါ်လာပါစေ၊ ဒုတိယအကြိမ်နှိပ်လိုက်သည့်အခါမှာမှ input များအစား စာသားများ ပြန်ပေါ်လာပါစေ။

ထုတ်ကုန်များပါဝင်သော array ထဲသို့ ပြောင်းလဲမှုတစ်ခု ထည့်သွင်းကြမည်၊ isEdit ဂုဏ်သတ္တိတစ်ခု ထည့်ခြင်း (ပြီးလျှင် ရိုးရှင်းစေရန် ဈေးခြင်းလှည်းနှင့် အလုပ်ကို ဖယ်ရှားလိုက်ခြင်း):

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100, isEdit: false},
  {id: id(), name: 'product2', cost: 200, isEdit: false},
  {id: id(), name: 'product3', cost: 300, isEdit: false},
];

Product Component

ထုတ်ကုန်တွင် တည်းဖြတ်ရန် ခလုတ်တစ်ခု ပြုလုပ်ကြမည်:

jsxfunction Product({ id, name, cost, isEdit }) {
  return <div>
    name: <span>{name}</span>
    cost: <span>{cost}</span>
    <button>edit</button>
  </div>;
}

ဤခလုတ်ကို နှိပ်လိုက်သည့်အခါ မိဘ component မှ လာသော toggleMode လုပ်ဆောင်ချက်တစ်ခုခု ခေါ်ယူလိမ့်မည်ဟု ပြုလုပ်ကြပါစို့:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    name: <span>{name}</span>
    cost: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      edit
    </button>
  </div>;
}

ကျွန်ုပ်တို့တွင် toggleMode အကောင်အထည်ဖော်မှု မရှိသေးသော်လည်း၊ ၎င်းသည် မိဘ component ထဲတွင်တည်ရှိမည်၊ သတ်မှတ်ပြောင်းလဲမှုအရ ထုတ်ကုန်၏ id ကိုလက်ခံမည်နှင့် isEdit ထုတ်ကုန်၏ဂုဏ်သတ္တိကို ဆန့်ကျင်ဘက်အဖြစ်သို့ ပြောင်းလဲမည်ဟု သိထားသည်။

ခလုတ်၏စာသားသည် နှိပ်သမျှအကြိမ်တိုင်း ပြောင်းလဲသွားစေရန်လည်း ပြုလုပ်ကြမည်:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    name: <span>{name}</span>
    cost: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

ယခု တည်းဖြတ်မှုမုဒ်တွင် ကျွန်ုပ်တို့တွင် ဒေတာများနှင့် input များရှိပြီး သာမန်မုဒ်တွင် span များရှိစေရန် ပြုလုပ်ကြပါစို့:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    name: {isEdit ? <input value={name} /> : <span>{name}</span>}
    cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

ကျွန်ုပ်တို့၏ input များအား onChange အဖြစ်အပျက်သို့ ချိတ်ဆက်ကြမည်၊ ထို့အတွင်း မိဘဆိုင်ရာ လုပ်ဆောင်ချက်တစ်ခုခု editProd ကို ခေါ်ယူမည်:

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    name: {
      isEdit
      ? <input value={name} onChange={event => editProd(id, 'name', event)} />
      : <span>{ name }</span>
    }
    cost: {
      isEdit
      ? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
      : <span>{ cost }</span>
    }
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

Products Component

ယခု Products component ထဲသို့ ကူးပြောင်းကြပါစို့။ ၎င်းထဲတွင် toggleMode လုပ်ဆောင်ချက်ကို အကောင်အထည်ဖော်ကြမည်:

jsxfunction toggleMode(id) {
  setProds(prods.map(prod => {
    if (prod.id === id) {
      prod.isEdit = !prod.isEdit;
    }
    
    return prod;
  }));
}

၎င်းထဲတွင် editProd လုပ်ဆောင်ချက်ကိုလည်း အကောင်အထည်ဖော်ကြမည်:

jsxfunction editProd(id, field, event) {
  setProds(prods.map(prod => {
    if (prod.id === id) {
      prod[field] = event.target.value;
    }
    
    return prod;
  }));
}

ထုတ်ကုန်ပါဝင်သော tag ထဲသို့ ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက်များ toggleMode နှင့် editProd ကို �ုဏ်သတ္တိများအဖြစ် လွှဲပြောင်းပေးကြမည်:

jsxconst items = prods.map(prod => {
  return <Product
    key ={prod.id}
    id  ={prod.id}
    name={prod.name}
    cost={prod.cost}
    isEdit={prod.isEdit}
    toggleMode={toggleMode}
    editProd={editProd}
  />;
});

Products component ၏ နောက်ဆုံးကုဒ်သည် �ောက်ပါအတိုင်း ဖြစ်လာမည်:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  function toggleMode(id) {
    setProds(prods.map(prod => {
      if (prod.id === id) {
        prod.isEdit = !prod.isEdit;
      }
      
      return prod;
    }));
  }
  
  function editProd(id, field, event) {
    setProds(prods.map(prod => {
      if (prod.id === id) {
        prod[field] = event.target.value;
      }
      
      return prod;
    }));
  }
  
  const result = prods.map(prod => {
    return <Product
      key ={prod.id}
      id  ={prod.id}
      name={prod.name}
      cost={prod.cost}
      isEdit={prod.isEdit}
      toggleMode={toggleMode}
      editProd={editProd}
    />;
  });
  
  return <div>
    {result}
  </div>;
}

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