如何为MUI Table每行添加Context Menu？行数据传递问题求助

MUI Table本身没有内置行级右键菜单，但完全可以通过自定义方式实现，核心思路是结合MUI的Menu组件监听行的右键点击事件，同时存储当前行数据供后续操作使用。

实现步骤 #

• 监听右键点击：为表格每一行添加onContextMenu事件，阻止浏览器默认右键菜单弹出，同时记录当前行的数据和点击位置。
• 渲染自定义菜单：使用MUI的Menu组件，根据记录的点击位置显示菜单，菜单选项绑定对应操作（比如编辑行数据）。
• 传递行数据：触发右键菜单时保存当前行的数据，后续操作直接调用该数据即可传递给编辑组件。

关键代码示例 #

基于你的场景改造的核心实现逻辑：

import { useState } from 'react';
import { Table, TableBody, TableRow, TableCell, Menu, MenuItem } from '@mui/material';

// 定义行数据类型
interface RowData {
  id: number;
  name: string;
  calories: number;
  // 其他字段根据实际需求补充
}

export default function TableWithContextMenu() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [currentRow, setCurrentRow] = useState<RowData | null>(null);

  // 处理右键点击事件
  const handleContextMenu = (event: React.MouseEvent, row: RowData) => {
    event.preventDefault(); // 阻止默认右键菜单
    setAnchorEl(event.currentTarget);
    setCurrentRow(row); // 存储当前行数据
  };

  // 关闭菜单
  const handleClose = () => {
    setAnchorEl(null);
    setCurrentRow(null);
  };

  // 编辑行操作
  const handleEditRow = () => {
    if (currentRow) {
      // 这里将currentRow传递给编辑组件即可
      console.log('待编辑行数据:', currentRow);
      handleClose();
    }
  };

  // 模拟表格数据
  const rows: RowData[] = [
    { id: 1, name: 'Frozen yoghurt', calories: 159 },
    { id: 2, name: 'Ice cream sandwich', calories: 237 },
    { id: 3, name: 'Eclair', calories: 262 }
  ];

  return (
    <>
      <Table>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.id}
              onContextMenu={(e) => handleContextMenu(e, row)}
              style={{ cursor: 'context-menu' }}
            >
              <TableCell>{row.name}</TableCell>
              <TableCell align="right">{row.calories}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {/* 自定义右键菜单 */}
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleEditRow}>编辑行</MenuItem>
        <MenuItem onClick={handleClose}>删除行</MenuItem>
      </Menu>
    </>
  );
}

注意事项 #

• 必须调用event.preventDefault()，否则浏览器默认右键菜单会覆盖自定义菜单。
• 通过currentRow状态存储行数据，确保菜单操作能准确获取到对应行的信息。
• 可根据需求扩展菜单选项，比如添加“查看详情”等功能，只需在MenuItem的点击事件中处理对应逻辑即可。

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