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

Posted 2023-02-19

【中文标题】在 React Table 中触发单元格 onClick 而不是行 onClick

【英文标题】：Trigger cell onClick instead of row onClick in React Table

【发布时间】：2019-08-05 04:08:43

【问题描述】：

I have the following table:

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

我还希望单击该行中的任何其他区域将重定向到另一个页面，因此我覆盖了反应表的 onClick，（如反应表文档中所建议：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 来处理单元格和行，但没有帮助。

有什么建议吗？

谢谢

【参考方案1】：

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

e.stopPropagation();

【参考方案2】：

你可以试试这个：

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