0

我正在使用以下链接中的分页组件，因为我无法根据用户选择将显示多少行来更新 pageLimit 值。

https://scotch.io/tutorials/build-custom-pagination-with-react

https://codesandbox.io/s/competent-river-xneqb

最初页面限制为 10。一旦用户单击按钮，页面限制将更改为 15。但是即使在更新组件后分页页面限制也不会改变。

   " import Pagination from "./components/Pagination";

    class App extends Component {
      state = {
        pageLimit : 10
      };

      handlePageLimit = () => {
        this.setState({pageLimit : 15})
        console.log("pagelimit inside fun",this.state.pageLimit)
      }

        return (     
                <div className="d-flex flex-row py-4 align-items-center">
                  <Pagination
                    totalRecords={this.state.totalCountries}
                    pageLimit={this.state.pageLimit}
                    pageNeighbours={1}
                    onPageChanged={this.onPageChanged}
                  />

            <button onClick={this.handlePageLimit}>Click</button>

            </div>
        );"

请帮我解决，当按钮单击时，页面限制应更改为 15。

4

1 回答 1

1

本指南有很多问题，最好找到另一个现成的解决方案并从头开始实施。如果你想继续使用它，你应该从这里开始：

基于 Tom Finney 的评论，您需要使用 componentDidUpdate，然后从那里手动更新渲染函数中的内容：

componentDidUpdate(prevProps) {
    if (prevProps.pageLimit !== this.props.pageLimit) {
      this.pageLimit = this.props.pageLimit;
      this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);
      this.gotoPage(1); // If you want to reset to first page on limit change
    }
  }

完全不值得努力。

于 2019-10-31T15:23:39.010 回答