Question

我有一个反应数据表，最近我在其中添加了很多条目时的分页。我希望通过在rowsPerPageOptions下拉菜单中选择“全部”来显示表中的所有条目。到目前为止，我设法将所有条目的计数显示在菜单中。

我现在需要的是用字符串“ all”标记entries.length对象，并将其显示在菜单中。有可能吗？

当我尝试使用类似all.push({label: this.state.entries.length});的方法时，我得到了错误消息：

对象作为React子对象无效（找到：带有键{label}的对象）。如果要渲染子级集合，请改用数组。

这使我认为我不能将带有键的数组用于菜单，因此必须以不同的方式显示该值。

代码：

编辑：在morteza ataiy评论并指出错误后，将all变量移入了render函数。

render() {
    return (
    let all = [5,10,25,50,(this.state.entries.length)];
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                component="div"
                count={this.state.entries.length}

                rowsPerPage={this.state.rowsPerPage}
                page={this.state.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={this.handleChangePage}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                labelRowsPerPage="Reihen pro Seite:"
                rowsPerPageOptions={all}

            );
    }

Image: The last entry is what I want to change

请记住，我是React和JavaScript的新手，谢谢！

Answer 1

只需在渲染方法中使用它即可：

postgres

Answer 2

您可以使用标签。请参考代码

<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

您可以将 -1 传递给后端并编写关于此的查询。

与材料UI表分页反应显示所有条目

2 个答案: