Реактта ата-ана күйін бала компонентте өңдеу

Енді өнімдерді өңдеу үшін ендітірелерді қолданайық. Ол үшін бала компонентте батырма жасайық.

Осы батырмаға бірінші рет басқанда атауы мен бағасының орнына оларды өңдеуге арналған ендітірелер пайда болсын, ал екінші рет басқанда ендітірелердің орнына тағы да мәтіндер шықсын.

Өнімдер массивіне өзгеріс енгізейік, 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>;
}

Енді өңдеу режимінде деректері бар ендітірелер, ал қарапайым режимде - спандар болуы үшін жасайық:

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

Ендітірелерге 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>;
}

Практикалық тапсырмалар