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

Question

我正在尝试显示菜单右击与反应-大-日历和材料用户界面，问题是菜单不能正确地显示在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>
            )
          }
        }

Answer 1

Material-UI有一个提供事件的示例，它似乎没有使用anchorEl属性，也没有使用空的“Context Menu”目标对象，而是将一个不同的对象置于状态。

  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，因此您可能希望使用状态的缩减程序。

然后，在<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在这种情况下是否会自动门户它的菜单)