在react-bootstrap-table-next中获取所选行ID的方法是通过使用onSelect事件来监听行的选择。当用户选择一行时,onSelect事件会触发并传递所选行的ID作为参数。以下是一个示例代码:
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
const data = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' }
];
const columns = [
{ dataField: 'id', text: 'ID' },
{ dataField: 'name', text: 'Name' }
];
const handleRowSelect = (row, isSelected) => {
if (isSelected) {
console.log('Selected row ID:', row.id);
}
};
const MyTable = () => {
return (
<BootstrapTable
keyField="id"
data={data}
columns={columns}
selectRow={{ mode: 'checkbox', onSelect: handleRowSelect }}
cellEdit={cellEditFactory({ mode: 'click', blurToSave: true })}
/>
);
};
export default MyTable;
在上面的代码中,我们定义了一个名为handleRowSelect的函数来处理行选择事件。当用户选择一行时,该函数会被调用,并传递所选行的数据对象和一个布尔值isSelected,表示该行是否被选中。我们可以在handleRowSelect函数中根据需要处理所选行的ID或其他属性。
此外,我们使用了react-bootstrap-table-next库提供的selectRow属性来启用行选择功能。通过设置mode为'checkbox',用户可以通过复选框选择多行。在selectRow中,我们将handleRowSelect函数传递给onSelect属性,以便在行选择时调用它。
这样,当用户选择一行时,控制台将打印出所选行的ID。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云云数据库MySQL(https://cloud.tencent.com/product/cdb_mysql)。
请注意,以上答案仅供参考,具体的实现方式可能因项目需求和技术栈而有所不同。
领取专属 10元无门槛券
手把手带您无忧上云