Mui Popover搭配React Big Calendar点击事件时位置显示错误如何解决

问题根因 #

你遇到的定位错误由两个核心写法错误导致：

• Popover 组件的anchorEl属性要求传入真实的DOM元素作为定位锚点，你当前代码里直接赋值为数字1，组件无法获取有效坐标，默认渲染到页面左上角
• transformOrigin 配置写死了固定像素值，即使锚点正确也会出现定位偏移
• React Big Calendar的onSelectEvent回调的第二个参数才是原生点击事件对象，你需要从该对象获取触发点击的DOM节点作为锚点

修复方案 #

直接替换对应逻辑即可，修改后的完整代码如下：

import React, { useState } from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
// 你之前使用的Collapse、Modal等依赖自行补全导入即可
import { Collapse, Modal } from 'antd'; 

const { Panel } = Collapse;
const { confirm } = Modal;
const localizer = momentLocalizer(moment)

function CalendarNew() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handlePopover = (calEvent, nativeEvent) => {
    // 直接取原生点击事件的触发元素作为锚点
    setAnchorEl(nativeEvent.currentTarget);
  };

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

  const open = Boolean(anchorEl);
  const id = open ? 'popover-trigger-click-root-close' : undefined;
  
  return (
    <div>
      <Calendar
        views={['month']}
        popup={true}
        localizer={localizer}
        events={isEvents} // 注意确保isEvents是你项目中已定义的有效事件数组
        style={{ height: 720 }}
        selectable={true}
        onSelectEvent={handlePopover}
      />

      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={closePopover}
        // 改成相对定位配置，不要写死像素值
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover>
    </div>
  )
}
export default CalendarNew;

额外说明 #

如果需要调整Popover和点击事件的相对位置，直接修改anchorOrigin和transformOrigin的vertical/horizontal属性即可，可选值包含top/bottom/left/right/center。

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