Material-UI Menu,MenuItem in a Table 不访问其记录的值，而是 MenuItem 只能访问最后一条记录的值答案

【问题标题】：Material-UI Menu,MenuItem in a Table doesn't access its record's values, instead MenuItem has access only to the last record's valuesMaterial-UI Menu,MenuItem in a Table 不访问其记录的值，而是 MenuItem 只能访问最后一条记录的值
【发布时间】：2019-08-30 21:55:03
【问题描述】：

我正在尝试为每个表格行放置一个弹出菜单作为操作列表。当点击“Action”时，“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。 Material-UI 版本：“4.1.3”

【问题讨论】：

标签： material-ui

【解决方案1】：

问题是，您有 4 个具有相同 AnchorEl 的菜单（并且它们的 open prop 使用相同的 AnchorEl）。
很难看到，但每次单击任意 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>
  )
}

然后，从您的 App 组件中：

 {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

【讨论】：