[英]onRowClick for react-bootstrap-table
Trying to get onRowClick to work, but nothing is happening when I click on the row.试图让 onRowClick 工作,但当我点击该行时什么也没有发生。
<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>
Sorry just figured it out抱歉才知道
have to set options必须设置选项
var options = {
onRowClick: function(row){
}
}
<BootstrapTable data={products} options={options} ...
For me I am using react-bootstrap-table-next
- v 4.0.3
and the above solution didn't work for some reason.对我来说,我使用的是react-bootstrap-table-next
- v 4.0.3
并且上述解决方案由于某种原因不起作用。 Where as the following implementation worked.以下实现在哪里工作。
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 }
/>
I followed the documentation from react-bootstrap-table2我遵循了react-bootstrap-table2 中的文档
No need to use onRawClick
.无需使用onRawClick
。 It works fine to add an onClick
to your tr
s.将onClick
添加到您的tr
效果很好。 Don't forget to use stopPropagation
on the buttons/links inside the table to not override their action.不要忘记在表格内的按钮/链接上使用stopPropagation
以免覆盖它们的操作。
For the new react-bootstrap-table2
:对于新的react-bootstrap-table2
:
const rowEvents = {
onClick: (e, row, rowIndex) => {
...
}
}
<BootstrapTable data={data} columns={columns} rowEvents={rowEvents} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.