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

我开始使用React和引导程序具有的所有移植库以及自定义元素。与行点击反应引导表按钮冲突

目前我遇到和反应引导程序表的问题：我已经定义，当用户点击一行时，它显示一个面板来编辑该行，但我也有一个按钮在行列之一，所以当我点击按钮，点击按钮，但然后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>); 
},

的问题是，当我徘徊该按钮，该行保持悬停状态。

来源

2016-09-23 Juan De Croche

你有没有试过在onClick回调按钮中停止事件传播？

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

来源

2016-09-23 18:17:13 kulesa

我相信它应该是'e.stopPropagation（）'，因为你在上面的代码片段中也提到了你的答案。 –

我改变了我的流程，我现在有一个行动和一个按钮的列，以做我以前做过的行点击，无论如何，我会尝试你的答案并给出反馈，谢谢！ –

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

回答

相关问题