如何在反应虚拟化表中选择行中的复选框？答案

【问题标题】：How to select checkboxes in row in react-virtuaized Table?如何在反应虚拟化表中选择行中的复选框？
【发布时间】：2020-08-12 06:43:57
【问题描述】：

我已经使用 react-virtualized Table 组件实现了一个 Table。我在表格中添加了一个复选框列，现在想使用这些复选框实现全选/选择行功能。

现在，为了添加全选/选择行功能，我正在使用反应挂钩来更改 CheckBox 的 checked 属性，但它似乎不起作用。下面是代码链接，当我用实际数据向下滚动页面时，复选框选中状态被删除。

这是我正在尝试执行的代码，checked 对于除标题之外的行始终保持为假。标题全选运行正常

...
import {Checkbox} from 'semantic-ui-react';
const[selectAll, setSelectAll] = useState(false):
const checked = [];
function _checkboxState(data) {
    if (checked.includes(data.index)) {
      checked.pop(data.index);
    } else {
      checked.push(data.index);
    }
  }
<Column
    disableSort
    dataKey="checkbox"
    width={30}
    headerRenderer={() => (
      <Checkbox
        checked={selectAll}
        onChange={() => {
          if (selectAll === true) {
            setSelectAll(false);
          } else {
            setSelectAll(true);
          }
        }}
      />
    )}
    cellRenderer={({rowIndex}) => (
      <Checkbox
        checked={selectAll || checked.includes(rowIndex)}
        onChange={(e, data) => {
          _checkboxState(data);
        }}
        index={rowIndex}
      />
    )}
/>
...

滚动表格后如何维护检查？
我在检查单个行时做错了什么？

对此的任何帮助表示赞赏！

【问题讨论】：

标签： javascript reactjs react-hooks semantic-ui-react react-virtualized

【解决方案1】：

与此同时，在等待答案的过程中，我花了更多时间，发现我正在变异checked，而不是使用useState钩子。

这是更新后的代码：

.....
const [checked, setChecked] = useState([]);

const _onChangeHeaderCheckbox = data => {
    data.checked ? setChecked(sortedList.map(row => row.id)) : setChecked([]);
  };

const _onChangeRowCheckbox = data => {
    const newRow = sortedList[data.index].id;
    checked.includes(newRow)
      ? setChecked(old => old.filter(row => row !== newRow))
      : setChecked(old => [...old, newRow]);
  };

....
<Column
  disableSort
  dataKey="checkbox"
  width={30}
  headerRenderer={() => (
    <Checkbox
      indeterminate={
        checked.length > 0 && checked.length < sortedList.length
      }
      checked={checked.length === sortedList.length}
      onChange={(e, data) => _onChangeHeaderCheckbox(data)}
    />
  )}
  cellRenderer={({ rowIndex }) => (
    <Checkbox
      checked={checked.includes(sortedList[rowIndex].id) === true}
      onChange={(e, data) => _onChangeRowCheckbox(data)}
      index={rowIndex}
    />
  )}
/>
....

这是带有虚拟数据的工作预览：

【讨论】：