具有Material UI上下文菜单的React Table

问题描述

我无法让Material UI Menu与React Table@v6一起使用。
我希望能够右键单击表中的任何位置（行，td）并显示上下文菜单。这部分正在工作。
但我也希望能够连续右键单击表中的其他位置，并始终在上下文菜单中显示光标位置。这是行不通的。当前，您必须单击以关闭菜单，然后再次单击鼠标右键以重新打开菜单。
在Material UI演示中，这可以正常工作：
https://material-ui.com/components/menus/#context-menu

我采用了上面的示例来处理React Table，但是它并没有按预期工作。

我的示例采用方法：
https://codesandbox.io/s/aged-leaf-0nf6b?file=/src/index.js

Any Ideas如何使它像示例中那样工作？

解决方法

这是因为您将onContextMenu道具添加到了Td，而不是表容器。

将onContext菜单移至容器div，如下所示：

<div onContextMenu={(e) => {
        e.preventDefault();
        console.log("context menu");
        this.setState({
          mouseX: e.clientX - 2,mouseY: e.clientY - 4
        });
      }}>

它应该可以工作。

享受！