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

问题描述

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

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

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

我尝试通过在 handleSelect 函数中将 !isChecked 更改为 archived 然后在 selectCellRenderer 中使用 isChecked={row.archived} 来做到这一点，但这只会使复选框变砖，因此您无法切换它完全没有，我不知道如何解决它。

父函数作为 props 传递：

  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
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）