React 对选中的复选框项目的价格求和

Question

嗨，我正在做一个简单的购物车。 每个购物车项目旁边都有一个复选框，选中后，将该项目添加到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;

Answer 1

由于您不是将其作为一个组进行维护，因此您可以每次都使用状态来维护购物车项目。 所以需要在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