javascript - 在分页部分动态选择每页的行数

Question

我想在我的列表组件的每个分页部分添加更改 perPage 选项值的功能。我基于 @material-ui/core's TablePagination component 创建了一个 CustomPagination 组件允许这样做但是出现了 2 个问题:

• 显示的范围位于第二页而不是第一页。无法通过点击上一页按钮进入第一页

• 如果我更改 perPage 下拉列表的值:没有任何反应，onChangeRowsPerPage 方法被正确调用，但 setPerPage 函数似乎什么也不做。另一方面，如果我单击下一页，则表格会正确显示与所选选项对应的行数，这很奇怪。仍然无法访问表格的第一页也是

下面是我的 PostList.js 组件的代码:

import { withStyles } from '@material-ui/core/styles';
import React from 'react';
import {
  Datagrid,
  List,
  Responsive,
  ShowButton,
  SimpleList,
  TextField
} from 'react-admin';

import Button from '@material-ui/core/Button';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import FlatButton from 'material-ui/FlatButton';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import TablePagination from '@material-ui/core/TablePagination';

const CustomPagination = ({ page, perPage, total, setPage, setPerPage 
}) => {
const nbPages = Math.ceil(total / perPage) || 1;

const handleChangeRowsPerPage = event => {
    perPage = event.target.value;
    setPerPage(perPage);
};

const handleChangePage = (event, page) => {
    page < nbPages && page > 0 && setPage(page);
};

return (
    nbPages > 1 && (
        <TablePagination
            component="span"
            count={total}
            rowsPerPage={perPage}
            page={page}
            backIconButtonProps={{
                'aria-label': 'Previous Page'
            }}
            nextIconButtonProps={{
                'aria-label': 'Next Page'
            }}
            onChangePage={handleChangePage}
            labelRowsPerPage="Lignes par page"
            rowsPerPageOptions={[2, 5, 10, 50, 100]}
            onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      )
    );
};

const styles = theme => ({
  title: {
    maxWidth: '20em',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }
});

const PostList = withStyles(styles)(({ classes, ...props }) => (
  <List
    {...props}
    sort={{ field: 'published_at', order: 'DESC' }}
    perPage={2}
    pagination={<CustomPagination />}
  >
    <Responsive
        small={
            <SimpleList
                linkType="show"
                primaryText={record => record.title}
            />
        }
        medium={
            <Datagrid>
                <TextField source="id" />
                <TextField source="title" cellClassName={classes.title} />
                <ShowButton />
            </Datagrid>
        }
    />
  </List>
));

export default PostList;

和codesandbox here

Answer 1

这将在即将到来的 2.3 版本中默认提供。有关详细信息，请参阅此拉取请求:https://github.com/marmelab/react-admin/pull/2173