时间戳

首页 > 解决方案 > React Table 与 Material UI 上下文菜单

reactjs - React Table 与 Material UI 上下文菜单

问题描述

我无法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

任何想法如何让它像示例中一样工作？

标签： reactjsmaterial-uireact-table

解决方案

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

将 onContext Menu 移动到容器 div，如下所示：

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

它应该工作。

享受！

推荐阅读