Valideynin state-nin usaq komponentde redaktə edilmesi React-də

Gəlin indi məhsullarımızı inputlar vasitəsilə redaktə edək. Bunun üçün usaq komponentdə düymə edək.

Bu düyməyə ilk klikdə məhsulun adı və qiyməti ilə birlikdə onları redaktə etmək üçün inputlar görünsün, ikinci klikdə isə inputların yerinə yenidən mətnlər görünsün.

Məhsullar massivində dəyişiklik edək, isEdit xassəsini əlavə edək (sadəlik üçün səbət işini isə çıxaraq):

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

Məhsulda redaktə etmək üçün düymə edək:

jsxfunction Product({ id, name, cost, isEdit }) {
  return <div>
    ad: <span>{name}</span>
    qiymət: <span>{cost}</span>
    <button>redaktə</button>
  </div>;
}

Gəlin elə edək ki, bu düyməyə kliklədikdə valideyn komponentdən ötürülən toggleMode adlı funksiya işə düşsün:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    ad: <span>{name}</span>
    qiymət: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      redaktə
    </button>
  </div>;
}

Hələlik toggleMode-ın realizasiyası yoxdur, amma bilirik ki, o valideyn komponentdə yerləşəcək, parametr kimi məhsulun id-sını qəbul edəcək və məhsulun isEdit xassəsini əksinə dəyişəcək.

Gəlin həmçinin elə edək ki, düymənin mətni hər klikdə dəyişsin:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    ad: <span>{name}</span>
    qiymət: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'yadda saxla': 'redaktə'}
    </button>
  </div>;
}

Gəlin indi elə edək ki, redaktə rejimində məlumatlar ilə inputlarımız olsun, adi rejimdə isə span-lar:

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    ad: {isEdit ? <input value={name} /> : <span>{name}</span>}
    qiymət: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'yadda saxla': 'redaktə'}
    </button>
  </div>;
}

Inputlarımızı onChange hadisəsinə bağlayaq, onunda hansısa valideyn funksiyası olan editProd-ı çağıracaq:

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    ad: {
      isEdit
      ? <input value={name} onChange={event => editProd(id, 'name', event)} />
      : <span>{ name }</span>
    }
    qiymət: {
      isEdit
      ? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
      : <span>{ cost }</span>
    }
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'yadda saxla': 'redaktə'}
    </button>
  </div>;
}

Products Komponenti

Gəlin indi Products komponentinə keçək. Onda toggleMode funksiyasını realizə edək:

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

Həmçinin onda editProd funksiyasını realizə edək:

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

Məhsul teqinə atribut kimi bizim toggleMode və editProd funksiyalarımızı ötürək:

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 komponentinin son kodu aşağıdakı kimi olacaq:

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

Praktiki tapşırıqlar