无法在右键单击 react-big-calendar 时显示菜单答案

【问题标题】：Unable to display menu on right click react-big-calendar无法在右键单击 react-big-calendar 时显示菜单
【发布时间】：2021-06-24 16:40:18
【问题描述】：

我正在尝试使用 react-big-calendar 和材料 ui 在右键单击时显示菜单，菜单在 html 上无法正确显示的问题，它在右上角，我的代码是：

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
return (
    <>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={() => redirectToEvent(selectedEvent)}>
          <ImportContactsTwoToneIcon
            color="primary"
            style={{ marginLeft: "15px" }}
          />{" "}
          פתח אירוע
        </MenuItem>
      
      </Menu>
 <Calendar
        localizer={localizer}
        events={events}
        step={60}
        views={["month", "day"]}
        onSelectEvent={(event, e) => {
        
          redirectToEvent(event);
        }}
        components={
          {
            eventWrapper: ({ event, children }) => (
              <div
                onContextMenu={
                  e => { 
                    setSelectedEvent(event);
                  
                //think this is the issue
                   setAnchorEl(e);
                
                    e.preventDefault();
                  }
                }
              >
                {children}
              </div>
            )
          }
        }

【问题讨论】：

标签： material-ui react-big-calendar

【解决方案1】：

Material-UI 有一个提供Context Menu 的示例，它似乎没有使用anchorEl 道具，或者采用裸露的“事件”目标对象，将不同的对象置于状态。

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu(
      contextMenu === null
        ? {
            mouseX: event.clientX - 2,
            mouseY: event.clientY - 4,
          }
        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
          // Other native context menus might behave different.
          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
          null,
    );
  };

  const handleClose = () => {
    setContextMenu(null);
  };

从示例的那部分来看，您似乎需要相应地更新您的onContextMenu。由于您为菜单设置了多个状态值，无论是定位还是引用 selectedEvent，您可能希望使用 reducer 来代替状态。

然后，在 <Menu> 本身上，它也会改变该状态。

<Menu
  open={contextMenu !== null}
  onClose={handleClose}
  anchorReference="anchorPosition"
  anchorPosition={
    contextMenu !== null
    ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
    : undefined
  }
>
// menu items
</Menu>

而且，既然您已将<Menu> 放置在您的<Calendar> 的容器对象中，那么您的容器上有什么样的样式，这是否也会影响它的布局？（我不知道Material-UI在这种情况下是否会自动传送它的菜单）

【讨论】：