Javascript 如何将数据传递给MenuItem事件处理程序

当我有一个数组并为数组中的每个元素渲染菜单时，项目的单击处理程序只接收数组中的最后一个元素，而不是用于该渲染的元素

这里的用例有一个项目列表，其中每个项目都有一个菜单来执行特定于该项目的操作，如“删除”、“编辑”等

不起作用示例：

导出默认函数simplemu（）{
const[anchor，setAnchor]=React.useState（null）；
const handleOpenMenu=（事件）=>{
setAnchor（event.currentTarget）；
};
const handleCloseMenu=（数字）=>{
控制台日志（编号）；
setAnchor（null）；
};
返回[“一”，“二]。映射（（数字）=>(
handleCloseMenu（数字）}>Log{number}
handleOpenMenu（e）}>菜单{number}
handleCloseMenu（编号）}
>
handleCloseMenu（编号）}>日志编号
));
}

但是，如果我在内存中保留一个映射，将数组元素映射到菜单的锚点，那么它将按预期工作

工作示例：

导出默认函数simplemu（）{
const[anchors，setAnchors]=React.useState（{}）；
const handleOpenMenu=（编号、事件）=>{
设置锚（（prevState）=>({
…国家，
[编号]：event.currentTarget
}));
};
const handleCloseMenu=（数字）=>{
控制台日志（编号）；
设置锚（（prevState）=>({
…国家，
[编号]：空
}));
};
返回[“一”，“二]。映射（（数字）=>(
handleCloseMenu（数字）}>Log{number}
handleOpenMenu（数字，e）}>菜单{number}
handleCloseMenu（编号）}
>
handleCloseMenu（编号）}>日志编号
));
}

---

这是呈现多个菜单的正确方法还是预期方法？

在第一个示例中：由于所有菜单的“打开”属性都是相同的锚定状态，因此您将同时打开它们。因此，只有最后一项出现，因为它位于顶部

第二种方法有效，因为您只访问每个“数字”的状态属性，并且一次只有一个菜单是“打开”的。这似乎是一个很好的解决方案，因为由于“ClickAway”事件，用户无法打开其他菜单

下面是解决此问题的另一个非常基本的示例。其中，每个菜单仅在当前选中其编号时才“打开”

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

export default function SimpleMenu() {
  const [anchor, setAnchor] = React.useState(null);
  const [currentNumber, setCurrentNumber] = React.useState(null);

  const handleOpenMenu = (event, number) => {
    setAnchor(event.currentTarget);
    setCurrentNumber(number);
  };

  const handleCloseMenu = (number) => {
    console.log(number);
    setAnchor(null);
    setCurrentNumber(null);
  };

  return ["one", "two"].map((number) => (
    <div key={number}>
      <Button onClick={() => handleCloseMenu(number)}>Log {number}</Button>
      <Button onClick={(e) => handleOpenMenu(e, number)}>Menu {number}</Button>
      <Menu
        anchorEl={anchor}
        keepMounted
        open={currentNumber === number}
        onClose={() => handleCloseMenu(number)}
      >
        <MenuItem onClick={() => handleCloseMenu(number)}>Log {number}</MenuItem>
      </Menu>
    </div>
  ));
}

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
导出默认函数simplemu（）{
const[anchor，setAnchor]=React.useState（null）；
常量[currentNumber，setCurrentNumber]=React.useState（null）；
const handleOpenMenu=（事件、编号）=>{
setAnchor（event.currentTarget）；
setCurrentNumber（数字）；
};
const handleCloseMenu=（数字）=>{
控制台日志（编号）；
setAnchor（null）；
setCurrentNumber（空）；
};
返回[“一”，“二]。映射（（数字）=>(
handleCloseMenu（数字）}>Log{number}
handleOpenMenu（e，number）}>菜单{number}
handleCloseMenu（编号）}
>
handleCloseMenu（数字）}>Log{number}
));
}

export default function SimpleMenu() {
  const [anchors, setAnchors] = React.useState({});

  const handleOpenMenu = (number, event) => {
    setAnchors((prevState) => ({
      ...prevState,
      [number]: event.currentTarget
    }));
  };

  const handleCloseMenu = (number) => {
    console.log(number);
    setAnchors((prevState) => ({
      ...prevState,
      [number]: null
    }));
  };

  return ["one", "two"].map((number) => (
    <div key={number}>
      <Button onClick={() => handleCloseMenu(number)}>Log {number}</Button>
      <Button onClick={(e) => handleOpenMenu(number, e)}>Menu {number}</Button>
      <Menu
        anchorEl={anchors[number]}
        keepMounted
        open={Boolean(anchors[number])}
        onClose={() => handleCloseMenu(number)}
      >
        <MenuItem onClick={() => handleCloseMenu(number)}>Log Number</MenuItem>
      </Menu>
    </div>
  ));
}

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

export default function SimpleMenu() {
  const [anchor, setAnchor] = React.useState(null);
  const [currentNumber, setCurrentNumber] = React.useState(null);

  const handleOpenMenu = (event, number) => {
    setAnchor(event.currentTarget);
    setCurrentNumber(number);
  };

  const handleCloseMenu = (number) => {
    console.log(number);
    setAnchor(null);
    setCurrentNumber(null);
  };

  return ["one", "two"].map((number) => (
    <div key={number}>
      <Button onClick={() => handleCloseMenu(number)}>Log {number}</Button>
      <Button onClick={(e) => handleOpenMenu(e, number)}>Menu {number}</Button>
      <Menu
        anchorEl={anchor}
        keepMounted
        open={currentNumber === number}
        onClose={() => handleCloseMenu(number)}
      >
        <MenuItem onClick={() => handleCloseMenu(number)}>Log {number}</MenuItem>
      </Menu>
    </div>
  ));
}