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

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

1 个答案: