Ծնողի state-ի խմբագրում երեխա կոմպոնենտում React-ում

Այժմ եկեք խմբագրենք մեր ապրանքները օգտագործելով input դաշտեր: Դրա համար երեխա կոմպոնենտում ստեղծենք կոճակ:

Առաջին սեղմումով այս կոճակի վրա թող ապրանքի անվանման և գնի փոխարեն հայտնվեն input դաշտեր դրանց խմբագրման համար, իսկ երկրորդ սեղմումով input դաշտերի փոխարեն կրկին հայտնվեն տեքստեր:

Փոփոխություններ կատարենք ապրանքների զանգվածում, ավելացնելով isEdit հատկությունը (իսկ զամբյուղի հետ աշխատանքը պարզության համար հանենք):

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 կոմպոնենտ

Ապրանքի մեջ ստեղծենք խմբագրման կոճակ.

jsxfunction Product({ id, name, cost, isEdit }) {
  return <div>
    անուն: <span>{name}</span>
    գին: <span>{cost}</span>
    <button>խմբագրել</button>
  </div>;
}

Եկեք անենք, որ այս կոճակի սեղմումով կանչվի ինչ-որ ֆունկցիա toggleMode, որը փոխանցվել է ծնող կոմպոնենտից.

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    անուն: <span>{name}</span>
    գին: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      խմբագրել
    </button>
  </div>;
}

Մենք դեռ չունենք toggleMode-ի իրականացում, բայց գիտենք, որ այն կգտնվի ծնող կոմպոնենտում, պարամետրով կընդունի id ապրանքի և կփոխի isEdit հատկությունը ապրանքի հակառակ արժեքի:

Նաև եկեք անենք, որ կոճակի տեքստը փոխվի յուրաքանչյուր սեղմման ժամանակ.

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    անուն: <span>{name}</span>
    գին: <span>{cost}</span>
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'պահպանել': 'խմբագրել'}
    </button>
  </div>;
}

Եկեք այժմ անենք, որ խմբագրման ռեժիմում ունենանք input դաշտեր տվյալներով, իսկ սովորական ռեժիմում - span տարրեր.

jsxfunction Product({ id, name, cost, isEdit, toggleMode }) {
  return <div>
    անուն: {isEdit ? <input value={name} /> : <span>{name}</span>}
    գին: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'պահպանել': 'խմբագրել'}
    </button>
  </div>;
}

Կապենք մեր input դաշտերը onChange իրադարձության հետ, որում կանչվի ինչ-որ ծնող ֆունկցիա editProd.

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    անուն: {
      isEdit
      ? <input value={name} onChange={event => editProd(id, 'name', event)} />
      : <span>{ name }</span>
    }
    գին: {
      isEdit
      ? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
      : <span>{ cost }</span>
    }
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'պահպանել': 'խմբագրել'}
    </button>
  </div>;
}

Products կոմպոնենտ

Եկեք այժմ անցնենք Products կոմպոնենտին: Իրականացնենք դրա մեջ toggleMode ֆունկցիան.

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

Նաև իրականացնենք դրա մեջ editProd ֆունկցիան.

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

Ապրանքի թեգին ատրիբուտներով փոխանցենք մեր toggleMode և 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}
  />;
});

Products կոմպոնենտի վերջնական կոդը կստացվի հետևյալը.

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

Գործնական առաջադրանքներ