嗨，我正在做一個簡單的購物車。每個購物車專案旁邊都有一個復選框，選中后，將該專案添加到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;uj5u.com熱心網友回復：
由于您不是將其作為一個組進行維護，因此您可以每次都使用狀態來維護購物車專案。所以需要在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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353789.html
標籤：javascript 反应