ブートストラップテーブルのボタンと行のクリックとの衝突

Question

私は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>); 
}, 

私はホバー時に問題がありますボタンを押すと、行はホバーオンのままです。

Answer 1

ボタンのonClickコールバックでイベントの伝播を停止しようとしましたか？

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