Kubadilisha State ya Mzazi katika Komponenți Mtoto katika React

Hebu sasa tubadilishe bidhaa zetu kwa kutumia viingilio. Kwa hili, katika komponenți mtoto tutafanya kifungo.

Kwa kubofya kwanza kwenye kifungo hiki, badala ya jina na bei ya bidhaa, viingilio vya kubadilisha viweze kuonekana, na kwa kubofya mara ya pili badala ya viingilio, maandishi yaonekane tena.

Tutafanya mabadiliko kwenye safu ya bidhaa, tukiongeza sifa isEdit (na kazi ya kikasha tutaiondoa kwa urahisi):

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

Komponenți Product

Tutafanya kifungo cha kubadilisha katika bidhaa:

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

Tutafanya ili kwa kubofya kifungo hiki itakayoitwa baadhi ya kitendakazi toggleMode, iliyopitishwa kutoka kwa komponenți mzazi:

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

Kwa sasa hatuna utekelezaji wa toggleMode, lakini tunajua kuwa itakuwa iko katika komponenți mzazi, ikikubali kigezo id cha bidhaa na kubadilisha sifa isEdit ya bidhaa kwa kinyume.

Tutafanya pia ili maandishi ya kifungo yabadilike kila kubofya:

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

Hebu sasa tufanye ili katika hali ya kubadilisha tuwe na viingilio vilivyo na data, na katika hali ya kawaida - 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>;
}

Tutafunga kwenye viingilio vyetu tukio onChange, ambacho tutaita baadhi ya kitendakazi cha mzazi 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>;
}

Komponenți Products

Hebu sasa tuende kwenye komponenți Products. Tutatekeleza ndani yake kitendakazi toggleMode:

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

Pia tutatekeleza ndani yake kitendakazi editProd:

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

Kwenye kitambulisho cha bidhaa kwa sifa tutapitishe vitendakazi vyetu toggleMode na 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}
  />;
});

Msimbo wa mwisho wa komponenți Products utakuwa kama ifuatavyo:

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

Kazi za Vitendo