반응 부트 스트랩 테이블 버튼이 행 클릭과 충돌 함

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