Material ui 材料UI上下文菜单，不包含'；阻止新的上下文菜单事件？

物料UI文档提供了一个。但当此菜单打开时，页面的所有元素似乎都停止接收onContextMenu事件。因此，如果在菜单打开时在菜单外单击鼠标右键，应用程序将无法识别单击的内容，也无法重新定位菜单。唯一的选项是先关闭菜单（例如，在菜单外单击鼠标左键），然后右键单击所需的元素

如何创建菜单，使其在打开时仍能识别页面中哪些元素被右键单击，并将菜单重新定位到新单击的位置

---

（这是对文档中示例的一个轻微修改，其中添加了第二个div，您可以右键单击该div）

找到了解决方案！诀窍是在父div的鼠标按下事件上关闭上下文菜单，并在菜单上设置exit transitionDuration为0。例如，请参见demo.tsx（另请参见）：

从“React”导入React；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/Typography”导入排版；
常量初始状态={
mouseX:null，
老鼠：空
};
导出默认函数上下文菜单（）{
const[state，setState]=React.useState（initialState）；
常数handleClick=(
divName:string，
事件：React.MouseEvent
) => {
console.log（divName）；
event.preventDefault（）；
设定状态({
mouseX:event.clientX-2，
mouseY:event.clientY-4
});
};
常量handleClose=（）=>{
设置状态（初始状态）；
};
返回(
e、 preventDefault（）}
onMouseDownCapture={e=>{
如果（e.button==2）handleClose（）；
}}
>
复制
印刷品
突出
电子邮件
handleClick（“div1”，e）}
样式={{cursor:“上下文菜单”}
>
公共知识是一种美德，是一种美德
purus，bibendum坐在一个地方，在一个地方
这是一个非常复杂的问题，它是一个非常复杂的问题
这是一种温和的语言，是一种温和的语言。
Nam quis vehicula ante，eu finibus est.Proin ullamcorper发酵液
奥奇，我是菲尼布斯·马萨，努克·洛博蒂斯，马萨·乌特鲁姆·尤里塞斯，
完成任务前，坐在设备旁边。
拉西尼亚悬钩子
告诉我们一个自由人。
-----
handleClick（“div2”，e）}
样式={{cursor:“上下文菜单”}
>
公共知识是一种美德，是一种美德
purus，bibendum坐在一个地方，在一个地方
这是一个非常复杂的问题，它是一个非常复杂的问题
这是一种温和的语言，是一种温和的语言。
Nam quis vehicula ante，eu finibus est.Proin ullamcorper发酵液
奥奇，我是菲尼布斯·马萨，努克·洛博蒂斯，马萨·乌特鲁姆·尤里塞斯，
完成任务前，坐在设备旁边。
拉西尼亚悬钩子
告诉我们一个自由人。
);
}

import React from "react";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";

const initialState = {
  mouseX: null,
  mouseY: null
};

export default function ContextMenu() {
  const [state, setState] = React.useState<{
    mouseX: null | number;
    mouseY: null | number;
  }>(initialState);

  const handleClick = (
    divName: string,
    event: React.MouseEvent<HTMLDivElement>
  ) => {
    console.log(divName);
    event.preventDefault();
    setState({
      mouseX: event.clientX - 2,
      mouseY: event.clientY - 4
    });
  };

  const handleClose = () => {
    setState(initialState);
  };

  return (
    <div
      onContextMenu={e => e.preventDefault()}
      onMouseDownCapture={e => {
        if (e.button === 2) handleClose();
      }}
    >
      <Menu
        keepMounted
        open={state.mouseY !== null}
        onClose={handleClose}
        anchorReference="anchorPosition"
        anchorPosition={
          state.mouseY !== null && state.mouseX !== null
            ? { top: state.mouseY, left: state.mouseX }
            : undefined
        }
        transitionDuration={0}
      >
        <MenuItem onClick={handleClose}>Copy</MenuItem>
        <MenuItem onClick={handleClose}>Print</MenuItem>
        <MenuItem onClick={handleClose}>Highlight</MenuItem>
        <MenuItem onClick={handleClose}>Email</MenuItem>
      </Menu>
      <div
        onContextMenu={e => handleClick("div1", e)}
        style={{ cursor: "context-menu" }}
      >
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
          purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
          bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
          sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
          Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
          orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
          metus metus finibus ex, sit amet facilisis neque enim sed neque.
          Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
          tellus a libero volutpat maximus.
        </Typography>
      </div>
      -----
      <div
        onContextMenu={e => handleClick("div2", e)}
        style={{ cursor: "context-menu" }}
      >
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
          purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
          bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
          sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
          Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
          orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
          metus metus finibus ex, sit amet facilisis neque enim sed neque.
          Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
          tellus a libero volutpat maximus.
        </Typography>
      </div>
    </div>
  );
}