Reakt-da ene komponentiň ýagdaýyny çalyşma komponentde üýtgetmek

Indi girişler ýardamynda önümlerimizi redaktirlemegi dowam edeliň. Bunun üçin çalyşma komponentinde düwmäni düzeliň.

Bu düwmä ilkinji gezek basylanynda, onuň ady we bahasynyň ýerine redaktirlemek üçin girişler peýda bolsun, ikinji gezek basylanynda bolsa girişleriň ýerine ýene-de teksti görkezsin.

Önümler masivine üýtgeşmeleri girizeliň, şol sanda isEdit aýratynlygyny goşuň (we ýönekeýleşdirmek üçin sebet bilen işi aýryň):

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 komponenti

Önümde redaktirlemek üçin düwme düzeliň:

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

Bu düwmä basylanynda, ene komponentden geçirilen birnäçe toggleMode funksiýasynyň çagyrylmagyny üpjün edeliň:

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

Häzir bize toggleMode funksiýasynyň amaly ýok, ýöne onuň ene komponentde ýerleşjekdigini, parametri hökmünde id önümini kabul edjekdigini we isEdit aýratynlygyny tersine üýtgedjekdigini bilýäris.

Şeýle hem, her basylyşda düwäniň teksti üýtgänini üpjün edeliň:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    ady: <span>{name}</span>
    bahasy: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'ýatda sakla': 'redaktirle'}
    </button>
  </div>;
}

Indi redaktirleme režiminde maglumatly girişleriň, ýönekeý režimde bolsa span-laryň bolmagyny üpjün edeliň:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    ady: {isEdit ? <input value={name} /> : <span>{name}</span>}
    bahasy: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'ýatda sakla': 'redaktirle'}
    </button>
  </div>;
}

Girişlerimize onChange wakasyny birikdirip, ol ýerde ene funksiýa editProd çagyralyň:

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    ady: {
      isEdit
      ? <input value={name} onChange={event => editProd(id, 'name', event)} />
      : <span>{ name }</span>
    }
    bahasy: {
      isEdit
      ? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
      : <span>{ cost }</span>
    }
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'ýatda sakla': 'redaktirle'}
    </button>
  </div>;
}

Products komponenti

Indi Products komponentine geçeliň. Onda toggleMode funksiýasyny amala aşyralyň:

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

Şeýle hem onda editProd funksiýasyny amala aşyralyň:

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

Önüm tegi bilen, atributlar arkaly bize toggleMode we editProd funksiýalarymyzy geçirip bereýliň:

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 komponentiniň soňky kody aşakdaky ýaly bolar:

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

Amaly işler