如何在 React 引导表分页中选择默认的项目数

Posted 2023-03-21

【中文标题】如何在 React 引导表分页中选择默认的项目数

【英文标题】：How to make default number of items selected in React bootstrap table pagination

【发布时间】：2021-11-25 03:11:52

【问题描述】：

我在我的应用程序中使用 React Bootstrap 表，我也在使用 bootstrap 表的分页。默认情况下，在应用程序中选择 10，当我选择项目数时，比如说 25，会出现相应的项目数。

但是，如果我随后通过单击其他位置并再次返回来更改路线（在组件卸载后），它会失去其状态，并且默认情况下再次选择 10 个项目，但应像以前一样选择下拉列表中的 25 个卸载它是 25。

我传递给paginationFactory()函数的选项

const options = 
      paginationSize: 3,
      showTotal: true,
      paginationTotalRenderer: customTotal,
      disablePageTitle: true,
      sizePerPageList: [
        text: '10', value: 10
      , 
        text: '25', value: 25
      , 
        text: '50', value: 50
      , 
        text: 'All', value: this.state.toggleList.length
      ],
      onSizePerPageChange: this.onPageSizeChange
    ;

我正在使用函数onSizePerPageChange 在大小更改时获取选定的项目数量，我还将值存储在 redux 存储中，每当我们回到道具中的组件时，我都会收到先前选择的值，但是如何在该分页下拉列表中默认选择该值。 请帮帮我。

用于引导表的 JSX

<BootstrapTable
     keyField="id"
     data=currentToggleList
     columns=columns
     pagination=paginationFactory(options)
/>

【参考方案1】：

我得到了解决方案，在选项中需要再传递一个属性sizePerPage，默认情况下会提供每页的项目数。

const options = 
      paginationSize: 3,
      showTotal: true,
      paginationTotalRenderer: customTotal,
      disablePageTitle: true,
      sizePerPageList: [
        text: '10', value: 10
      , 
        text: '25', value: 25
      , 
        text: '50', value: 50
      , 
        text: 'All', value: this.state.toggleList.length
      ],
      onSizePerPageChange: this.onPageSizeChange,
      sizePerPage: this.state.sizePerPage               // Added new property
    ;