Блог

Главная - Вопросы по программированию - React выполняет суммирование цен на товары с установленным флажком

React выполняет суммирование цен на товары с установленным флажком

#javascript #reactjs

Вопрос:

Привет, я делаю простую корзину для покупок. Рядом с каждым товаром в корзине установлен флажок, который при установке флажка добавляет этот товар в массив orderedItems, а затем приложение выводит сумму всех отмеченных товаров.

Я настроил его так, чтобы каждый элемент был дочерним компонентом, а в родительском я настроил обработчик события handleChange, который привязан к свойству onChange флажка. Проблема в том, что я понятия не имею, как «передать» компонент элемента для определенного флажка в родительский элемент.

Чтобы ознакомиться с демонстрацией приложения в реальном времени, ознакомьтесь с этим https://codesandbox.io/s/checkbox-summation-p29pm?file=/src/Item.js:28-239

 export default function App() {
  const allItems = AllItems;
  const [orderedItems, setOrderedItems] = useState([]);

  const handleChange = (event) => {
    console.log(event);
    if (event.target.checked) {
      console.log("checked", event.target.name);
      // add item to orderedItems array
    } else {
      // remove item from orderedItems array
    }
  };

  return (
    <div className="App">
      {allItems.map((item) => (
        <Item item={item} key={item.name} handleChange={handleChange} />
      ))}

      <div>
        Total ={" "}
        {orderedItems.length === 0
          ? "0"
          : orderedItems.reduce((acc, item) => {
              return acc   Number(item.price);
            }, 0)}
      </div>
    </div>
  );
}

КОМПОНЕНТ ЭЛЕМЕНТА:

 const Item = ({ item, handleChange }) => {
  return (
    <div>
      <input type="checkbox" name={item.name} onChange={handleChange} />
      {item.name} ${item.price}
    </div>
  );
};

export default Item;

Ответ №1:

Поскольку вы не поддерживаете его как группу, вы можете использовать состояние для поддержания товара в корзине каждый раз. Итак, вам нужно передать данные товара и данные события в handleChange.

Компонент товара:

 const Item = ({ item, handleChange }) => {
  return (
    <div>
      <input type="checkbox" name={item.name} onChange={event => handleChange(item, event)} />
      {item.name} ${item.price}
    </div>
  );
};

export default Item;

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

 const handleChange = (item, event) => {
    if (event.target.checked) {
      setOrderedItems((cartItem) => [...cartItem, item]);
      setTotalCost((total) => total   parseInt(item.price));
      // add item to orderedItems array
    } else {
      // remove item from orderedItems array
      setOrderedItems((cartItem) =>
        cartItem.filter((i) => i.name !== item.name)
      );
      setTotalCost((total) => total - parseInt(item.price));
    }

Здесь вы можете получить исполняемый код
https://codesandbox.io/s/checkbox-summation-forked-0wnp9?file=/src/App.js:296-750

Метки: , ,