Njia za Kufanya Kazi Kupitia Hali za Vijenzi Vinavyotokana katika React

Acha safu yetu ya bidhaa sasa ionekane kama ifuatavyo:

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'},
];

Wacha tuonyeshe bidhaa hizi kwenye jedwali la HTML. Wakati huo huo, tufanye ili kwa kubofya kwenye kiini chochote cha jedwali kipande cha ingizo kionekane kwenye kiini hicho kwa ajili ya kuhariri. Ili kutatua tatizo hili tutatengeneza 3 vijenzi.

Kijenzi Products kitahifadhi hali ya bidhaa na kutumia vijenzi Product kwa ajili ya kuonyesha bidhaa. Kijenzi Product kwa upande wake pia kitatumia vijenzi ProductField kwa ajili ya kuonyesha uga fulani wa bidhaa (jina, bei, kategoria).

Kijenzi ProductField kitaonyesha ama maandishi ya uga, ama kipengele cha ingizo kwa ajili ya kuhariri. Wakati huo horo, hali ya kuhariri au kuonyesha acha isimamiwe na hali ya kijenzi hiki.

Hii inamaanisha hatutahifadhi hali katika hali ya kijenzi mzazi. Huko ingekuwa rahisi sana, kwa sababu tungelazimika kubainisha hali kwa kila uga wa bidhaa, jambo ambalo lingegeuza hali yetu kuwa kitu kama hiki:

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},
  ],
]

Hata hivyo, hatutafanya hali kama hii, bali tutaacha ile ile iliyokuwepo. Tu kila mfano wa kijenzi ProductField kupitia hali yake mwenyewe utadhibiti hali: ama kuhariri, ama kuonyesha.

Kwa hivyo itatokea kwamba kijenzi mzazi katahifadhi hali yenye data, na kijenzi chetu kizuri kitapata hii data kupitia props na wakati huo huo kitakuwa na hali yake mwenyewe kwa ajili ya kubadilisha hali yake.

Basi, wacha tutekeleze yaliyoelezewa.

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

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

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

Kazi za Vitendo