Question

尝试使用onLowClick工作，但点击该行时没有任何事情发生。

    <BootstrapTable data={products} onRowClick={this.onClickHandler.bind(this)} striped={true} hover={true} pagination={true} search={true} searchPlaceholder="Search">
        <TableHeaderColumn isKey={true} dataField="_id">Customer ID</TableHeaderColumn>
        <TableHeaderColumn dataField="customername" >Customer Name</TableHeaderColumn>
        <TableHeaderColumn dataField="address">Address</TableHeaderColumn>
        <TableHeaderColumn dataField="city">City</TableHeaderColumn>
        <TableHeaderColumn dataField="createdate">Last Order Date</TableHeaderColumn>
        <TableHeaderColumn dataField="style">Style</TableHeaderColumn>
        <TableHeaderColumn dataField="dimensions">Dimensions</TableHeaderColumn>
    </BootstrapTable>

Answer 1

很抱歉只是想出来了

必须设置选项

var options = {
 onRowClick: function(row){
 }
}

<BootstrapTable data={products} options={options} ...

Answer 2

对我来说，我正在使用react-bootstrap-table-next-v 4.0.3，由于某种原因，上述解决方案无效。以下实现在哪里工作？

const tableRowEvents = {
   onClick: (e, row, rowIndex) => {
     console.log(`clicked on row with index: ${rowIndex}`);
   },
   onMouseEnter: (e, row, rowIndex) => {
     console.log(`enter on row with index: ${rowIndex}`);
   }
}

<BootstrapTable
      hover
      bordered={false}
      bootstrap4
      keyField={"apps.App"}
      data={apps ? apps : no_Data}
      columns={columns}
      rowEvents={ tableRowEvents }
/>

我遵循了react-bootstrap-table2

中的文档

Answer 3

无需使用onRawClick。将onClick添加到您的tr中很好。别忘了在表格内的按钮/链接上使用stopPropagation来覆盖其操作。

Answer 4

对于新的 react-bootstrap-table2：

const rowEvents = {
  onClick: (e, row, rowIndex) => {
    ...
  }
}

<BootstrapTable data={data} columns={columns} rowEvents={rowEvents} />

onRowClick for react-bootstrap-table

4 个答案: