හර්ෂක සංරචකයක දේවල තත්වය සංස්කරණය කිරීම React හි

දැන් අපි අපගේ නිෂ්පාදිත ආදාන ක්ෂේත්‍ර භාවිතයෙන් සංස්කරණය කරමු. මේ සඳහා දරු සංරචකය තුළ බොත්තමක් සාදමු.

මෙම බොත්තම මත පළමු ක්ලික් කිරීමෙන් නම සහ මිල අතරට ඒවා සංස්කරණය කිරීම සඳහා ආදාන ක්ෂේත්‍ර පෙනෙනු ඇත, දෙවන ක්ලික් කිරීමෙන් ආදාන ක්ෂේත්‍ර වෙනුවට නැවත අකුරු පෙනෙනු ඇත.

නිෂ්පාදිත සමඟ අරාවට වෙනස්කම් කරමු, එක් කරමින් 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},
];

නිෂ්පාදිත සංරචකය

නිෂ්පාදිතයක සංස්කරණය සඳහා බොත්තමක් සාදමු:

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

මෙම බොත්තම මත ක්ලික් කිරීමෙන් යම් ශ්‍රිතයක් 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 ක්‍රියාත්මක කිරීමක් නොමැත, නමුත් එය පිහිටා ඇත්තේ දේවල සංරචකය තුළ බවත්, පරාමිතියක් ලෙස භාර ගන්නේ නිෂ්පාදිතයේ 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>;
}

දැන් අපි සංස්කරණ ප්‍රකාරයේදී දත්ත සහිත ආදාන ක්ෂේත්‍ර තිබෙන පරිදි සකසමු, සාමාන්‍ය ප්‍රකාරයේදී - 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>;
}

අපගේ ආදාන ක්ෂේත්‍රවලට 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 සංරචකය වෙත යමු. එහි 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;
  }));
}

නිෂ්පාදිත ටැගයට අපගේ ශ්‍රිත 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 සංරචකයේ අවසාන කේතය පහත පරිදි වේ:

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>;
}

ප්‍රායෝගික කාර්යයන්