Material UI - 动态渲染/打开菜单答案

【问题标题】：Material UI - Render / Open Menu DynamicallyMaterial UI - 动态渲染/打开菜单
【发布时间】：2021-04-22 10:03:12
【问题描述】：

我正在尝试为我的每个 JSX 按钮元素呈现一个 Material UI 菜单。

现在我所有的菜单项都堆叠在一起。我只能显示菜单与被点击的Button相关。

See it in Action

export default function App() {
  const [anchorEl, setAnchorEl] = useState(null);
  const menuOptions = [
    { id: 0, name: "Remove", method: "remove" },
    { id: 1, name: "Duplicate", method: "duplicate" },
    { id: 2, name: "New", method: "addNew" }
  ];

  const [addressInputFields, setAddressInputFields] = useState([
    { firstName: "", lastName: "" },
    { firstName: "", lastName: "" },
    { firstName: "", lastName: "" },
    { firstName: "", lastName: "" }
  ]);

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = (event) => {
    setAnchorEl(null);
  };

  return (
    <div>
      {addressInputFields.map((input, index) => (
        <span key={index}>
          <button type="button" name="address" onClick={handleMenu}>
            ShowMenu
          </button>
          <Menu
            id="option-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleMenuClose}
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "left"
            }}
            getContentAnchorEl={null}
          >
            <span>Menu Index: {index}</span>
            {menuOptions.map((option) => (
              <MenuItem key={option.id}>{option.name}</MenuItem>
            ))}
          </Menu>
        </span>
      ))}
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您可以通过index 跟踪当前打开的Menu，然后仅根据Boolean(anchorEl) 和打开索引，将open 属性设置为true 渲染菜单，如下所示：

const [anchorEl, setAnchorEl] = useState(null);

// track with menu should be opened
const [openIndex, setOpenIndex] = useState(-1);

const handleMenu = (index) => (event) => {
  setAnchorEl(event.currentTarget);
  setOpenIndex(index); // set current menu index to open
};

const handleMenuClose = (event) => {
  setAnchorEl(null);
};

return (
  <div>
    {addressInputFields.map((input, index) => (
      <span key={index}>
        <button
          name="address"
          // handleMenu now need the index context to know which menu to open
          onClick={handleMenu(index)}
        >
          ShowMenu
        </button>
        <Menu
          // only render currently open menu
          open={Boolean(anchorEl) && index === openIndex}
          onClose={handleMenuClose}
          {...props}
        >
          <span>Menu Index: {index}</span>
          {menuOptions.map((option) => (
            <MenuItem key={option.id}>{option.name}</MenuItem>
          ))}
        </Menu>
      </span>
    ))}
  </div>
);

现场演示

【讨论】：

好主意，逻辑上也很棒！