下一页和上一页在 react-bootstrap-table2-paginator 中不起作用

Question

我已经使用 react-bootstrap-table2-paginator 实现了带有分页的表格。 在每个页码上单击它将调用 api 并获取表日期。 它可以工作，但下一页、上一页和最后一页不工作。

我使用了 pageButtonRenderer，一切正常，但下一页和上一页，最后一页不工作。

class TableData extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state={  page: 1,
      sizePerPage: 10};
  }
  render() {
    const pageButtonRenderer = ({
      page,
      currentPage,
      disabled,
      title,
      onPageChange
    }) => {
      const handleClick = (e) => {
        e.preventDefault();
        if(typeof page !== "string" ){
         this.setState({ page: page});
         this.props.pageClick(page, this.state.sizePerPage);// api call 
        }
       };    
      return (
        <div>
          {
           <li className="page-item">
             <a href="#"  onClick={ handleClick } className="page-link">{ page }</a>
           </li>
          }
        </div>
      );
    };
    const sizePerPageRenderer = ({
      options,
      currSizePerPage,
      onSizePerPageChange
    }) => (
      <div className="btn-group" role="group">
        {options.map(option => (
            <button
              key={option.text}
                 type="submit"
              onClick={(e) => {
                onSizePerPageChange(option.page);
                if (e) e.preventDefault();
              }}
              className={`btn ${
                currSizePerPage === `${option.page}`
                  ? "btn-secondary"
                  : "btn-warning"
              }`}
            >
              {option.text}
            </button>
          ))}
      </div>
    );
    const options = {
      sizePerPageRenderer,
      totalSize: 1000,
      pageButtonRenderer,
      onSizePerPageChange: (sizePerPage, page) => {
        this.setState({sizePerPage: sizePerPage},()=>{
         this.props.pageClick(page,sizePerPage);
        });
      }
    };
    return (
      <div className="table-wrapper">
        <BootstrapTable
          pagination={paginationFactory(options)}
          options={options}
          keyField="id"
          data={rows}
          columns={columns}
        />
      </div>
    );
  }
}
export default TableData;

Answer 1

你需要在你的handleClick中调用onPageChange(page)

     const handleClick = (e) => {
        e.preventDefault();
        if(typeof page !== "string" ){
         this.setState({ page: page});
         this.props.pageClick(page, this.state.sizePerPage);// api call 
         onPageChange(page); <------ here
        }
       };

See here