在 React 中触发单元格 onClick 而不是行 onClick Table

Question

I have the following table:

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

我还希望单击该行中的任何其他区域将重定向到另一个页面，因此我覆盖了 react table 的 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();

在 React 中触发单元格 onClick 而不是行 onClick Table

Trigger cell onClick instead of row onClick in React Table

reactjs

react-table