材质 UI 菜单，表中的菜单项不访问其记录的值，而是 MenuItem 只能访问最后一条记录的值

Question

我正在尝试将弹出菜单作为每个表格行的操作列表。单击"操作"时，"handleMenuClick"功能始终为所有记录打印"Jan 04">

import React from "react";
import ReactDOM from "react-dom";
import {Table,TableHead,TableBody,TableRow,TableCell} from "@material-ui/core";
import { Flex, Box } from "reflexbox";
import Icon from "@mdi/react";
import { mdiDotsVertical } from "@mdi/js";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
const list = [
{ Val1: "Jan 01", Val2: 4000, Val3: 2400 },
{ Val1: "Jan 02", Val2: 3000, Val3: 1398 },
{ Val1: "Jan 03", Val2: 2000, Val3: 6800 },
{ Val1: "Jan 04", Val2: 6780, Val3: 3908 }
];
function App() {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleMenuClick(Val1) {
console.log(Val1);
}
return (
<div className="App">
<Table>
<TableHead>
<TableRow>
<Flex>
<TableCell>Col1</TableCell>
<TableCell>Action</TableCell>
</Flex>
</TableRow>
</TableHead>
<TableBody>
{list &&
list.map(n => (
<Flex>
<TableCell>{n.Val1}</TableCell>
<TableCell>
<Button onClick={handleClick}>
<Icon path={mdiDotsVertical} size={1.2} />
</Button>
<Menu
id="card-actions-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={() => handleMenuClick(n.Val1)}>
Action
</MenuItem>
</Menu>
</TableCell>
</Flex>
))}
</TableBody>
</Table>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当我单击"操作"按钮时，它应该记录自己记录的 Val1。 材质用户界面版本："4.1.3">

Answer 1

问题是，你有4 个菜单具有相同的 AnchorEl(并且它们的打开道具使用相同的 AnchorEl(。
很难看到，但每次点击任意 3 个点时：

1. 您更改状态
2. 触发重新渲染
3. 所有菜单共享同一个 AnchorEl，因此它们都在同一个锚点下打开(它们在同一个位置打开，这就是为什么你只看到一个打开，但实际上它们都是(

---

这就是为什么，当单击"操作"时，您始终会获得最后一个呈现的菜单项(数组中的最后一个菜单项(的值。
要解决此问题，请创建一个菜单组件来管理自己的状态并拥有自己的锚点：

const ThreeDotsMenu = (props) => {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleMenuClick(Val1) {
console.log(Val1);
}
const handleClick = (e) => {
setAnchorEl(e.currentTarget);
}
const handleClose = () => {
setAnchorEl(null);
}
const {data} = props;
return(
<React.Fragment>
<Button onClick={handleClick}>
<Icon path={mdiDotsVertical} size={1.2} />
</Button>
<Menu
id="card-actions-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={() => handleMenuClick(data.Val1)}>
Action
</MenuItem>
</Menu>
</React.Fragment>
)
}

然后，从您的应用程序组件：

{list &&
list.map(n => (
<Flex>
<TableCell>{n.Val1}</TableCell>
<TableCell>
<ThreeDotsMenu data={n} />
</TableCell>
</Flex>
))}

你可以参考这个工作 CodeSandbox 示例：https://codesandbox.io/s/material-demo-o9jxr?fontsize=14