我正在學習 react.js 并嘗試實作基本的添加到購物車功能，試圖保持簡單，只是為了理解流程。
我有兩張卡片，其中一張卡片中列出了專案，選擇專案并單擊按鈕后，相應的專案應出現在另一張卡片中。
據我所知，我需要以某種方式過濾并檢查唯一屬性是否與引數匹配，然后添加到卡片中。
請找到Codesandbox 鏈接和下面的代碼
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { styled } from "@mui/material/styles";
import React, { useState, useEffect } from "react";
const StyledBox = styled("div")({
paddingRight: "70px",
paddingLeft: "70px",
boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
backgroundColor: "#FFFFFF",
border: "1px solid black",
minHeight: "200px"
});
const AddToCard = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((result) => setData(result))
.catch((e) => console.log(e));
}, []);
const addToCardHandleClick = (id) => {
setData(
data.map((item: any) => {
const tempItem = data.find((item: any) => item === id);
if (!tempItem) return [...item, { id }];
})
);
};
return (
<Card sx={{ maxWidth: 700, minHeight: "300px" }}>
<CardContent>
<Box
sx={{
display: "flex",
gap: "30px",
justifyContent: "center",
overflow: "auto"
}}
>
<StyledBox sx={{ minWidth: "100px" }}></StyledBox>//The selected item should appear here after clicking
<Box
sx={{
alignSelf: "center",
gap: "10px"
}}
>
<Button
variant="outlined"
onClick={() => addToCardHandleClick(null)} //instead of null should be correct property
>
Move
</Button>
</Box>
<StyledBox>
{data &&
data.map((item) => (
<ul key={item.id} style={{ listStyle: "none" }}>
<li>{item.name}</li>
</ul>
))}
</StyledBox>
</Box>
</CardContent>
</Card>
);
};
export default AddToCard;
任何幫助將不勝感激
uj5u.com熱心網友回復：
我在代碼沙箱中試了一下：https : //codesandbox.io/s/imgmediacard-material-demo-forked-9nq22
我item.selected用來跟蹤被點擊的元素，一旦你點擊移動，我就會洗掉item.selected屬性并添加item.moved = true......
如果您需要以正確的順序顯示移動的專案，您可以：
按 item.order添加
item.order = counter或item.order = Date.now()排序所有 item.moved對移動的專案使用單獨的陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354015.html
標籤：javascript 反应
上一篇：將JS陣列與HTML表連接