[英]Dynamic page pagination is not working in react table
I am using react-table
v7 to generate a table.我正在使用
react-table
v7 来生成一个表。 And now I am trying to make page size pagination dynamically by writing this现在我试图通过写这个来动态地进行页面大小分页
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{page.length > 10 ? (
<MenuItem id={10} value={10} key={10}>
Show 10
</MenuItem>
) : (
[10, 20].map((pageSize) => (
<MenuItem value={pageSize} key={pageSize}>
Show {pageSize}
</MenuItem>
))
)}
</Select>
If page (rows) length is over 10, it shows two options Show 10
and Show 20
, but when I select Show 20
, dropdown value doesn't show value anymore如果页面(行)长度超过 10,它会显示两个选项
Show 10
和Show 20
,但是当我选择Show 20
,下拉值不再显示值
And I get a warning in console Material-UI: You have provided an out-of-range value '20' for the select component. Consider providing a value that matches one of the available options or ''. The available values are '10'.
我在控制台
Material-UI: You have provided an out-of-range value '20' for the select component. Consider providing a value that matches one of the available options or ''. The available values are '10'.
收到警告Material-UI: You have provided an out-of-range value '20' for the select component. Consider providing a value that matches one of the available options or ''. The available values are '10'.
Material-UI: You have provided an out-of-range value '20' for the select component. Consider providing a value that matches one of the available options or ''. The available values are '10'.
It works fine if I remove ternary operator in {page.length > 10 ? ..
如果我在
{page.length > 10 ? ..
删除三元运算符,它工作正常{page.length > 10 ? ..
{page.length > 10 ? ..
and just put [10,20,30].map() ..
{page.length > 10 ? ..
然后把[10,20,30].map() ..
If for the initial rendering, the value of page.length
is over 10, the drop-down list will only display Show 10
because that's what your logic states.如果对于初始渲染,
page.length
的值超过 10,下拉列表将只显示Show 10
因为这就是您的逻辑状态。 If that's really what you want and your problem is the non-displayed values, it works by changing MenuItem
to option
, with both select
and option
non-capitalized (in react-table 7.7.0):如果这确实是您想要的,并且您的问题是未显示的值,那么它的工作原理是将
MenuItem
更改为option
,并且select
和option
都未大写(在 react-table 7.7.0 中):
<select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{page.length > 10 ? (
<option id={10} value={10} key={10}>
Show 10
</option>
) : (
[10, 20].map((pageSize) => (
<option value={pageSize} key={pageSize}>
Show {pageSize}
</option>
))
)}
</select>
On the other hand, if what you want is to give the option of displaying only the Show 10
option when you have less than 10 rows, then change the >
to <
in the ternary operator check.另一方面,如果您希望在行数少于 10 行时提供仅
Show 10
选项的选项,则在三元运算符检查中将>
更改为<
。 That way you'll give (dynamically) the option of displaying only Show 10
if there are less than 10 rows, or both options, Show 10
and Show 20
, when there are 10 rows or more.这样,如果行数少于 10 行,您将(动态地)提供仅
Show 10
的选项,或者当有 10 行或更多行时,提供两个选项Show 10
和Show 20
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.