Question

我试图将弹出菜单作为每个表行的操作列表。单击“操作”时，“ handleMenuClick”功能始终为所有记录打印“ Jan 04”

Preference

当我单击“操作”按钮时，它应该记录自己记录的Val1。 Material-UI版本：“ 4.1.3”

Answer 1

问题是，您有 4个菜单具有相同的AnchorEl （并且其打开的道具使用了相同的AnchorEl）。
很难看到，但是每次您单击任意三个点时：

您更改状态
重新渲染已触发
所有菜单共享相同的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

Material-UI菜单，表中的MenuItem不能访问其记录的值，而MenuItem只能访问最后一条记录的值

1 个答案: