Question

我希望单击行右侧的三个点将打开一个弹出菜单，所以我为此单元格编写了onClick函数。

我还希望单击该行中的任何其他区域将重定向到另一页，因此我覆盖了react表的onClick（如react table文档中的建议：https://github.com/tannerlinsley/react-table/tree/v6#custom-props）通过以下方式：

 _getTdProps = (state, rowInfo, column, instance) => ({
     onClick: (e, handleOriginal) => {
        if (this.props.onTableRowClick) {
            this.props.onTableRowClick({ e, column, rowInfo, instance });
        }
        if (this.props.shouldHandleOriginalOnClick && handleOriginal) {
           handleOriginal();
        }
    },
})

我的问题是，当我按下三个点的图标而不是打开弹出菜单时，也会发生重定向到另一个页面的情况。

如何使此功能起作用？我尝试将z-index用于单元格和行，但这没有帮助。

有什么建议吗？

谢谢

Answer 1

您可以尝试以下方法：

handleKeyDown(event) {
  event.preventDefault(); // Let's stop this event.
  event.stopPropagation(); // This will work.
}

Answer 2

您可以在点单击事件上调用stopPropagation方法，以便在单击点时该事件不会冒泡到该行。

e.stopPropagation();

触发单元格onClick而不是React表中的行onClick

2 个答案: