反应引导表按钮与行点击冲突

Posted 2023-02-22

【中文标题】反应引导表按钮与行点击冲突

【英文标题】：react bootstrap table button conflict with row clicking

【发布时间】：2017-02-01 15:49:35

【问题描述】：

我开始使用 React 以及引导程序拥有的所有移植库和自定义库。

目前我遇到了 react bootstrap table 的问题：我已经定义，当用户单击一行时，它会显示一个面板来编辑该行，但我在其中一个行列中也有一个按钮，所以当我单击按钮，单击按钮，但随后触发了 onRowClick 事件，我不希望这种情况发生，我尝试了很多不同的方法，但我无法让它工作，你知道怎么做吗？

这是桌子：

<BootstrapTable 
                data =  this.props.data 
                striped =  true 
                hover =  true 
                search =  true 
                options =  onRowClick: this.props.onUserEdit   >

                <TableHeaderColumn 
                    dataField = "id"
                    isKey =  true 
                    dataSort =  true 
                    hidden =  true > ID 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "email"         
                    dataAlign="center"
                    dataSort =  true > Email 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "name"
                    dataAlign="center"
                    dataSort =  true > User Name 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "info"
                    dataAlign="center"
                    dataSort =  true > Study, Site ID, Role 
                </TableHeaderColumn> 

                <TableHeaderColumn 
                    dataField = "lastlogin"
                    dataAlign="center"
                    dataSort =  true 
                    dataFormat=this.buttonFormatter> Last Login 
                </TableHeaderColumn> 
</BootstrapTable> 

这就是我在单元格中呈现按钮的方式（this.echo 只是一个调试警报）：

buttonFormatter: function(cell, row, formatExtraData, rowIdx) 
    return (<Button onClick= this.echo  className="grid-button">cell</Button>);
,

问题是当我悬停按钮时，该行仍然保持悬停状态。

【参考方案1】：

您是否尝试过在按钮 onClick 回调中停止事件的传播？

echo(e) 
  e.preventDefault();
  console.log("echo");
,

【讨论】：

我认为应该是e.stopPropagation()，因为您在代码sn-p上方的答案中也提到了。

我改变了我的流程，我现在有一个包含操作的列和一个按钮来执行我之前通过行单击完成的操作，无论如何，我会尝试您的答案并提供反馈，谢谢!