reactjs - 是否有可能覆盖列表组件的反应管理分页以添加输入以允许选择我们的页面？

Question

我想知道实际上反应管理员是否让我们覆盖列表组件中的实际分页以在“...”的位置添加输入并直接输入页码而不是单击按钮？

经过一些调查，我认为我们实际上不能，但也许我错了，我想看看是否有人这样做，或者实际上不可能，并且可能是一个很好的添加功能。 屏幕显示我想要覆盖的位置

标签： reactjsmaterial-uireact-admin

Answer 1

我假设你已经知道 React。

如果您查看Pagination Component下的文档，实际上有一个示例向您展示如何创建自定义分页。

您可以添加自定义输入，如下所示。

const PostPagination = () => {
    const { page, perPage, total, setPage } = useListContext();
    const nbPages = Math.ceil(total / perPage) || 1;
    return (
        nbPages > 1 &&
            <Toolbar>
                {page > 1 &&
                    <Button color="primary" key="prev" onClick={() => setPage(page - 1)}>
                        <ChevronLeft />
                        Prev
                    </Button>
                }
                {page !== nbPages &&
                    <Button color="primary" key="next" onClick={() => setPage(page + 1)}>
                        Next
                        <ChevronRight />
                    </Button>
                }

                {/* add a custom input */}
                <input value={some state} onChange={(e) => setPage(e.target.value)} />


        </Toolbar>
);

}