如何将我的 React Table 的选定行数 save/store 转换为变量? - ReactJS
How to save/store the selected number of rows of my React Table into a variable? - ReactJS
这是我的 React Table。默认情况下,我默认使用 10 行。当我们 select 下拉列表中的行数为 5、10、20、50 和 100 时,我想记录(或更好地存储到状态变量中)行数。
当我从下拉列表中 select 50 行时,我想将 50 行存储在状态变量中。同样,当我 select 100 行时,我想将 50 行存储在状态变量中。
这是我的 React Table - https://codesandbox.io/s/42nl1j300w
编辑 1:使用@seebiscuit 的答案后出现此错误。这是我的代码 - https://codesandbox.io/s/42nl1j300w
编辑 2 - 问题仍然存在。如果我将状态变量 pageSize 的默认值设置为 10,当我 selecting 20 时,它打印 10。在 20 之后,如果我 select 50,它给出的值是未定义的。
我发现
onPageSizeChange={(state) => { this.setState({ pageSize: state.pageSize }}}
state.pageSize 未定义,因此状态变量 pageSize 也未定义。
在 <ReactTable>
中使用 onPageSizeChange
回调属性并根据需要保存 pageSize
。
<ReactTable
// ... other props
onPageSizeChange={(pageSize) => { this.setState({ pageSize }}}
/>
这是我的 React Table。默认情况下,我默认使用 10 行。当我们 select 下拉列表中的行数为 5、10、20、50 和 100 时,我想记录(或更好地存储到状态变量中)行数。
当我从下拉列表中 select 50 行时,我想将 50 行存储在状态变量中。同样,当我 select 100 行时,我想将 50 行存储在状态变量中。
这是我的 React Table - https://codesandbox.io/s/42nl1j300w
编辑 1:使用@seebiscuit 的答案后出现此错误。这是我的代码 - https://codesandbox.io/s/42nl1j300w
编辑 2 - 问题仍然存在。如果我将状态变量 pageSize 的默认值设置为 10,当我 selecting 20 时,它打印 10。在 20 之后,如果我 select 50,它给出的值是未定义的。
我发现
onPageSizeChange={(state) => { this.setState({ pageSize: state.pageSize }}}
state.pageSize 未定义,因此状态变量 pageSize 也未定义。
在 <ReactTable>
中使用 onPageSizeChange
回调属性并根据需要保存 pageSize
。
<ReactTable
// ... other props
onPageSizeChange={(pageSize) => { this.setState({ pageSize }}}
/>