與行點擊反應引導表按鈕衝突

我開始使用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（）'，因爲你在上面的代碼片段中也提到了你的答案。 –

我改變了我的流程，我現在有一個行動和一個按鈕的列，以做我以前做過的行點擊，無論如何，我會嘗試你的答案並給出反饋，謝謝！ –

與行點擊反應引導表按鈕衝突

回答

相關問題