我正在尝试为我的每个 JSX 按钮元素渲染一个 Material UI 菜单。
现在我所有的菜单项都堆叠在一起。我只能显示菜单 与被点击的 Button 相关。
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>
);
}
答案 0 :(得分:1)
您可以通过它的 Menu
跟踪当前打开的 index
,然后仅在基于 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>
);