Как изменить значение одного инпута в массиве инпутов?

Question

Я делаю корзину, где вывожу данные о товаре, а так же количество товара, которое отображается в инпут.

Я хочу дать возможность изменяет количество определенного товара в корзине. То есть, если я введу другое значение в инпут, оно должно меняться. С одним инпутом я бы создала состояние и в функции onChange меняла бы его, но у меня массив, и я без понятия как изменять значение в инпут.

    import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import "./basket.css"

const Basket = () => {
    const state = useSelector(state => state.products)
    const [summa, setSumma] = useState(0)

useEffect(()=>{
    let sum = 0
    state.cart.map(item =>{
        sum+=item.product.price*item.amount
    })
    setSumma(sum)
}, [])


return (
    <div className="basket">
        <h1>Моя корзина</h1>
       {state.cart.map(item => 
           <div className="cart" >
               <div className="cart__item">
                   <div  className="basket__img">
                    <img src={item.product.img}/>
                   </div>
                   <div>
                       {item.product.name}
                       <h3>{item.product.price} тг</h3>
                   </div>
                   
               </div>
               <div className="cart__item">
                   <input type="number" value={item.amount} className="product__amount"
                    onChange={e => item.amount = e.target.value}
                   />
                   <div className="cart__item-price">{item.amount * item.product.price} тг</div>
               </div>
           </div>
       )}
       <div>
           <h3>Общая сумма </h3>
           <h2>{summa}</h2>
       </div>
        
    </div>
)
}

export default Basket

Как мне динамически менять состояние в инпутах?

Answer 1

Вам нужно вынести разметку, которая отвечает за ваш товар в отдельный компонент, создав в нем локальное состояние, в которым бы хранилось количество этого товара.

В итоге получилось бы нечто такое

state.cart.map(item => 
    <Product item={item}/> // Где item - сам товар.
)

В компоненте Product вышло бы нечто подобное:

const Product = (props) => {
  const [amount, setAmount] = useState(0); // Стандартом будет 0
  useEffect(() => {
    setAmount(props.item.amount) // Как только компонент получит кол-во, засетаем его
  }, [props.amount])

  return (
    // Разметка продукта, где вы сможете использовать состояние amount
  )
}

Иной метод реализации представляет из себя создание состояния, которое было бы объектом в родительском компоненте Basket, содержащим в себе все товары, что вы хотите хранить, и их кол-во (вот примерная реализация):

const [productsAmount, setProductsAmount] = useState(
  {
    // Здесь ваши продукты и их кол-во в виде ключ значение 
    // К примеру apple: 1, banana: 2,
  }
);

Дальше эти данные можно промаппивать и прокидывать в компонент Product.

Еще один метод реализации - хранить все ваши товары в глобальном состоянии, где у каждого товара было бы поле с его количеством, и при изменении его кол-ва диспатчить экшен, что менял бы количество товара.

БЛОГ НА HUSL

Как изменить значение одного инпута в массиве инпутов?

Ответы (1 шт):