1

我开始使用 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>);
},

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

4

1 回答 1

3

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

echo(e) {
  e.preventDefault();
  console.log("echo");
},
于 2016-09-23T18:17:13.917 回答