react-big-calendar配合Material UI实现右键菜单时显示位置异常问题求助

问题根因 #

你给setAnchorEl传入的是鼠标事件对象e本身，而Material UI的Menu组件的anchorEl属性仅接受真实DOM元素作为有效值，传入无效值时Menu会默认定位到页面视口右上角，就是你当前遇到的异常表现。

修复方案 #

你可以根据需求选择以下两种实现方式：

方案1：菜单锚定到右键点击的日历事件块 #

直接修改onContextMenu里的锚点赋值逻辑，传入事件绑定的DOM元素即可：

eventWrapper: ({ event, children }) => (
  <div
    onContextMenu={
      e => { 
        setSelectedEvent(event);
        // 把e替换为e.currentTarget，获取当前绑定事件的div元素
        setAnchorEl(e.currentTarget);
        e.preventDefault();
      }
    }
  >
    {children}
  </div>
)

注意：菜单关闭的handleClose函数内需要同步调用setAnchorEl(null)清空锚点，避免下次打开定位异常

方案2：菜单跟随鼠标右键点击位置显示 #

如果需要菜单刚好出现在鼠标点击的坐标处，可以改用Menu的坐标定位属性，不需要依赖锚点元素：

1. 替换锚点state为坐标存储

// 替换原来的anchorEl state
const [contextMenuPos, setContextMenuPos] = useState(null);

2. 修改右键事件逻辑

onContextMenu={
  e => { 
    setSelectedEvent(event);
    // 存储鼠标点击坐标
    setContextMenuPos({
      top: e.clientY,
      left: e.clientX
    });
    e.preventDefault();
  }
}

3. 修改Menu组件属性

<Menu
  id="simple-menu"
  keepMounted
  // 用坐标控制显隐
  open={Boolean(contextMenuPos)}
  // 指定用坐标定位
  anchorReference="anchorPosition"
  anchorPosition={contextMenuPos}
  onClose={() => {
    handleClose();
    // 关闭时清空坐标
    setContextMenuPos(null);
  }}
>
  {/* 原有MenuItem内容不变 */}
</Menu>

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