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

Question

我正在尝试为每个 JSX 按钮元素渲染一个 Material UI 菜单。

现在我的所有菜单项都相互堆叠。我只能显示菜单 与已单击的按钮相关。

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>
  );
}

Answer 1

您可以通过其index跟踪当前打开的Menu，然后仅在open属性设置为true的情况下渲染菜单 基于 Boolean(anchorEl) 和开放索引，如下所示:

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>
);

现场演示