如何为Material UI Card添加Edit、Delete等三点菜单选项？

要给Material-UI卡片的三点菜单添加Edit、Delete选项，你需要结合Menu和MenuItem组件实现，而非直接在IconButton区域添加选项。以下是具体实现方案：

1. 导入所需组件 #

确保引入必要的Material-UI组件和React状态钩子：

import { useState } from 'react';
import { IconButton, Menu, MenuItem } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';

2. 管理菜单状态 #

在组件内部添加状态，控制菜单的显示/隐藏以及附着位置：

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

3. 编写菜单控制函数 #

添加打开、关闭菜单的处理函数，以及Edit/Delete的业务逻辑函数：

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

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

const handleEdit = () => {
  // 此处编写编辑操作的逻辑
  handleMenuClose();
};

const handleDelete = () => {
  // 此处编写删除操作的逻辑
  handleMenuClose();
};

4. 替换原IconButton并渲染菜单 #

将原有的IconButton代码替换为以下内容，同时渲染菜单组件：

<IconButton
  edge="end"
  aria-label="更多选项"
  aria-controls="card-menu"
  aria-haspopup="true"
  onClick={handleMenuOpen}
>
  <MoreVertIcon />
</IconButton>
<Menu
  id="card-menu"
  anchorEl={anchorEl}
  open={isMenuOpen}
  onClose={handleMenuClose}
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
  transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
  <MenuItem onClick={handleEdit}>Edit</MenuItem>
  <MenuItem onClick={handleDelete}>Delete</MenuItem>
</Menu>

关键说明 #

• aria-controls和aria-haspopup属性用于无障碍访问，需与Menu组件的id保持一致。
• 通过anchorOrigin和transformOrigin可以调整菜单相对于三点图标的显示位置，确保对齐正确。
• 每个MenuItem的点击事件需先执行业务逻辑，再调用关闭菜单的函数。

内容的提问来源于stack exchange，提问作者user21099360