如何在react-bootstrap-table中選擇所有帶有分頁的原始文件？

Question

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
export default class StudentTable extends React.Component {


  render() {
    const selectRowProp = {
      mode: 'checkbox'
    };

    return (
      <BootstrapTable ref='table' data={ this.state.studentData } selectRow={ selectRowProp } pagination>
          <TableHeaderColumn dataField='id' isKey={ true }>Student ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Student Name</TableHeaderColumn>
          <TableHeaderColumn dataField='city'>City</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

當我實現它時，它在表中顯示分頁並帶有所有未選中的復選框。

但是當我單擊全選時，它將僅選擇當前頁面大小的記錄。當我從分頁控制轉到下一頁時，未選擇其他記錄。

當我單擊全選復選框時，我想選擇所有記錄。我該怎么辦？

Answer 1

我從這里找到解決方案

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
export default class StudentTable extends React.Component {
    onSelectAll = (isSelected) => {
     if (isSelected) {
        return this.state.studentData.map(row => row.id);
      } else {
        return [];
      }
   }

  render() {
    const selectRowProp = {
      mode: 'checkbox',
      onSelectAll: this.onSelectAll
    };

    return (
      <BootstrapTable ref='table' data={ this.state.studentData } selectRow={ selectRowProp } pagination>
          <TableHeaderColumn dataField='id' isKey={ true }>Student ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Student Name</TableHeaderColumn>
          <TableHeaderColumn dataField='city'>City</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}