javascript - 尝试将两个值绑定到 React Virtualized Table 中的复选框的单个 isSelected 值，复选框停止工作

Question

我正在开发一个使用 React Virtualized Table and Rows 来显示项目信息的项目。

编写了一个预先存在的函数来处理与项目数据属性相关的复选框的选中状态isSelected。

我要做的是将复选框的选中状态设置为每个项目的初始数据值archived，然后在每次单击时切换isSelected和值。archived

我尝试通过在 handleSelect 函数中更改!isChecked为archived，然后isChecked={row.archived}在 selectCellRenderer 中使用来做到这一点，但这只会使复选框变砖，因此您根本无法切换它，而且我不确定如何修复它。

父函数作为道具传递：

  handleSelect = ({ index, rowData }) => {
    const { selected } = this.state;
    const { id, isChecked, archived } = rowData;

    const newSelected = !isChecked ? [...selected, id] : selected.filter(item => item !== id);

    this.setState({ selected: newSelected });
  };

与父级通信的子函数：

  const selectCellRenderer = ({ rowIndex: index, rowData }) => (
    <Checkbox isChecked={rowData.isChecked} onChange={() => onSelect({ index, rowData })} />
  );

每个项目数据如下所示：

{
  archived: false,
  created_at: "2021-06-04T01:48:25.438Z",
  id: "1234567-891-4636-8c04-97a142fa457d",
  isChecked: false
}

标签： javascriptreactjsreact-virtualized