React හි සාරාංශ ප්‍රභවීය ප්‍රතිචාර දැක්වීමේ ක්‍රම

දැන් අපගේ නිෂ්පාදන අරාව පහත ආකාරයෙන් පෙනෙනු ඇතැයි සිතමු:

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 වගුවක ආකාරයෙන් ප්‍රදර්ශනය කරමු. වගුවේ ඕනෑම කොටුවක් මත ක්ලික් කිරීමේදී එම කොටුව තුළ සංස්කරණය සඳහා ආදාන ක්ෂේත්‍රයක් දිස්වන පරිදි මෙය කරමු. මෙම ගැටළුව විසඳීම සඳහා අපි 3 ප්‍රතිචාර දැක්වීම් සාදමු.

Products ප්‍රතිචාර දැක්වීම නිෂ්පාදන සමඟ state එකක් අඩංගු කරගෙන නිෂ්පාදන ප්‍රදර්ශනය කිරීම සඳහා Product ප්‍රතිචාර දැක්වීම් භාවිතා කරයි. Product ප්‍රතිචාර දැක්වීම එලෙසම නිශ්චිත නිෂ්පාදන ක්ෂේත්‍රයක් (නම, මිල, ප්‍රවර්ගය) ප්‍රදර්ශනය කිරීම සඳහා ProductField ප්‍රතිචාර දැක්වීම් භාවිතා කරයි.

ProductField ප්‍රතිචාර දැක්වීම ක්ෂේත්‍රයේ පෙළ ප්‍රදර්ශනය කරයි නැතහොත් එය සංස්කරණය කිරීම සඳහා ආදාන ක්ෂේත්‍රයක් පෙන්වයි. මෙම සංස්කරණ ක්‍රමය හෝ ප්‍රදර්ශන ක්‍රමය මෙම ප්‍රතිචාර දැක්වීමේ state එක මගින් පාලනය කරයි.

එනම්, අපි මෙම ක්‍රමය ප්‍රභවීය state එකේ ගබඩා නොකරමු. එහිදී එය ඉතා අපහසු වනු ඇත, මන්ද සෑම නිෂ්පාදන ක්ෂේත්‍රයක් සඳහාම ක්‍රමය සඳහන් කිරීමට අපට සිදුවන අතර, එය අපගේ 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 ප්‍රතිචාර දැක්වීමකම උදාහරණයක් තමන්ගේම state එක භාවිතා කර ක්‍රමය නියාමනය කරයි: සංස්කරණය හෝ ප්‍රදර්ශනය.

මේ ආකාරයෙන්, ප්‍රභවීය ප්‍රතිචාර දැක්වීම දත්ත සමඟ state එකක් ගබඩා කරන අතර, අපගේ අභ්‍යන්තර ප්‍රතිචාර දැක්වීම මෙම දත්ත props හරහා ලබාගෙන ඒ සමඟම තමන්ගේ ක්‍රමය වෙනස් කිරීම සඳහා තමන්ගේම state එකක් අඩංගු කරගනී.

ඉතින්, අපි විස්තර කරන ලද දේ ක්‍රියාත්මක කරමු.

Products ප්‍රතිචාර දැක්වීම

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 ප්‍රතිචාර දැක්වීම

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 ප්‍රතිචාර දැක්වීම

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

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