时间戳

首页 > 解决方案 > React 对选中的复选框项目的价格进行汇总

javascript - React 对选中的复选框项目的价格进行汇总

问题描述

嗨，我正在做一个简单的购物车。每个购物车项目旁边都有一个复选框，选中后，将该项目添加到orderedItems 数组，然后应用程序打印出所有选中项目的总和。

我已将其设置为每个项目都是一个子组件，并在父组件中设置了一个与复选框的 onChange 属性挂钩的 handleChange 事件处理程序。问题是，我不知道如何将某个复选​​框的 Item 组件“传递”到父级中。

有关应用程序的现场演示，请查看 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;

标签： javascriptreactjs

解决方案

由于您没有将其作为一个组进行维护，因此您可以每次都使用状态来维护购物车项目。所以需要在handleChange中传递item数据和事件数据。

物品成分：

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;

在 App 组件中，您将能够处理数据。我已经以这种方式处理它（我添加了另一个状态变量来获得总成本，我不想每次进行更改时都运行循环，所以我保持状态）

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

推荐阅读