React+MUI表格行菜单anchorEl无效问题求助

核心问题分析 #

你的代码有三个核心问题，直接导致菜单定位错误和控制台警告：

• 所有行的IconButton和Menu使用重复ID，破坏了ARIA关联规则，MUI无法正确识别每个菜单对应的锚点元素。
• 单个menuState管理所有行的菜单状态，点击不同行时锚点元素被覆盖，最终传入Menu的anchorEl无效。
• 未定义handleClose函数，菜单关闭后状态未更新，残留错误的anchorEl值。

方案一：每行使用独立菜单（推荐，逻辑简单） #

为每行单独维护菜单状态，确保每个菜单有唯一的锚点和ID：

export const MetricsQuery = () => {
  // 用对象存储每行的菜单状态，key为行的唯一标识
  const [menuStates, setMenuStates] = useState<Record<string, { open: boolean; anchorEl: null | Element }>>({});

  const handleOpenMenuClick = (rowId: string) => ({ currentTarget }: MouseEvent) => {
    setMenuStates(prev => ({
      ...prev,
      [rowId]: { open: true, anchorEl: currentTarget }
    }));
  };

  const handleClose = (rowId: string) => () => {
    setMenuStates(prev => ({
      ...prev,
      [rowId]: { ...prev[rowId], open: false }
    }));
  };

  return (
    <TableContainer component={Paper}>
      <StyledTable>
        {/* Header */}
        <TableBody>
          {queryMetrics.map((row: QueryMetric, index) => {
            // 优先用行自身的唯一ID，无则用索引生成临时ID
            const rowId = row.id || `row-${index}`;
            const menuState = menuStates[rowId] || { open: false, anchorEl: null };
            
            return (
              <TableRow key={rowId}>
                <TableCell component="th" scope="row">
                  {row.locationName}
                </TableCell>
                <TableCell>{row.deviceName}</TableCell>
                <TableCell>{row.pointName}</TableCell>
                <TableCell>
                  <Stack>
                    <IconButton
                      id={`menu-button-${rowId}`}
                      aria-controls={menuState.open ? `menu-${rowId}` : undefined}
                      aria-haspopup="true"
                      aria-expanded={menuState.open ? 'true' : undefined}
                      onClick={handleOpenMenuClick(rowId)}
                    >
                      <MoreVertIcon sx={{color: theme.palette.primary.light}} fontSize="small"/>
                    </IconButton>
                    <Menu
                      anchorEl={menuState.anchorEl}
                      open={menuState.open}
                      onClose={handleClose(rowId)}
                      MenuListProps={{
                        'aria-labelledby': `menu-button-${rowId}`
                      }}
                      id={`menu-${rowId}`}
                    >
                      <MenuItem onClick={handleClose(rowId)}>Remove</MenuItem>
                      <MenuItem onClick={handleClose(rowId)}>Disable</MenuItem>
                      <MenuItem onClick={handleClose(rowId)}>Pin to Top</MenuItem>
                    </Menu>
                  </Stack>
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </StyledTable>
    </TableContainer>
  );
};

关键修改点： #

• 用Record<string, ...>存储每行的菜单状态，通过行唯一ID区分不同菜单。
• 为每个IconButton和Menu生成唯一ID，确保ARIA属性正确关联。
• 新增handleClose函数，精准更新对应行的菜单状态。

方案二：使用单个共享菜单（性能更优，适合大数据量表格） #

只渲染一个菜单，点击不同行时更新锚点和打开状态，减少DOM节点数量：

export const MetricsQuery = () => {
  const [menuState, setMenuState] = useState<{
    open: boolean;
    anchorEl: null | Element;
    currentRowId: string | null; // 记录当前操作的行ID
  }>({open: false, anchorEl: null, currentRowId: null});

  const handleOpenMenuClick = (rowId: string) => ({ currentTarget }: MouseEvent) => {
    setMenuState({open: true, anchorEl: currentTarget, currentRowId: rowId});
  };

  const handleClose = () => {
    setMenuState(prev => ({...prev, open: false, anchorEl: null}));
  };

  // 处理菜单操作，比如删除当前行
  const handleMenuItemClick = (action: string) => () => {
    if (menuState.currentRowId) {
      // 根据操作类型和行ID执行对应逻辑
      console.log(`执行${action}操作，行ID：${menuState.currentRowId}`);
    }
    handleClose();
  };

  return (
    <TableContainer component={Paper}>
      <StyledTable>
        {/* Header */}
        <TableBody>
          {queryMetrics.map((row: QueryMetric, index) => {
            const rowId = row.id || `row-${index}`;
            
            return (
              <TableRow key={rowId}>
                <TableCell component="th" scope="row">
                  {row.locationName}
                </TableCell>
                <TableCell>{row.deviceName}</TableCell>
                <TableCell>{row.pointName}</TableCell>
                <TableCell>
                  <IconButton
                    id={`menu-button-${rowId}`}
                    aria-controls={menuState.open && menuState.currentRowId === rowId ? 'shared-menu' : undefined}
                    aria-haspopup="true"
                    aria-expanded={menuState.open && menuState.currentRowId === rowId ? 'true' : undefined}
                    onClick={handleOpenMenuClick(rowId)}
                  >
                    <MoreVertIcon sx={{color: theme.palette.primary.light}} fontSize="small"/>
                  </IconButton>
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </StyledTable>
      {/* 单个共享菜单放在表格外部 */}
      <Menu
        anchorEl={menuState.anchorEl}
        open={menuState.open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': `menu-button-${menuState.currentRowId}`
        }}
        id="shared-menu"
      >
        <MenuItem onClick={handleMenuItemClick('Remove')}>Remove</MenuItem>
        <MenuItem onClick={handleMenuItemClick('Disable')}>Disable</MenuItem>
        <MenuItem onClick={handleMenuItemClick('Pin to Top')}>Pin to Top</MenuItem>
      </Menu>
    </TableContainer>
  );
};

关键修改点： #

• 在menuState中添加currentRowId，记录当前操作的行，用于后续业务逻辑。
• 将单个菜单放在表格外部，避免重复渲染，提升性能。
• 点击菜单项时，根据currentRowId执行对应操作。

额外注意事项 #

• 尽量使用后端返回的唯一ID作为行标识，避免用数组索引（index），防止行顺序变化时出现状态异常。
• 确保theme通过useTheme()钩子正确获取，避免theme.palette报错。

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