React-Table在过滤后返回剩余项目？

【问题标题】：React-Table returning remaining items after filtering?React-Table在过滤后返回剩余项目？
【发布时间】：2019-03-14 21:44:07
【问题描述】：

对于这个使用多选的 React-Table 示例，关于如何不使用选择框而能够单击行的任何想法...然后执行此示例的反向操作...

点击的行被过滤掉并保存在状态，但是表格的其余部分被重新渲染？也许实际上状态是我们删除的所有数据？但如果我们有数百万条记录，这将是非常非常糟糕的。

https://codesandbox.io/s/3x51yzollq

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux react-table

【解决方案1】：

要能够单击该行并选择它，您可以使用getTrProps

data={this.state.data}
getTrProps={(state, rowInfo, column) => {
  if (rowInfo && rowInfo.original) {
    return {
      onClick: () => {
        // handle select
        this.handleSingleCheckboxChange(rowInfo.index);
      }
    };
  } else {
      return {};
  }
}}

并且在处理选择的函数中，您可以过滤掉并重新渲染

handleSingleCheckboxChange = index => {
  //filter and setState to change data
  let newData = this.state.data;
  newData = newData .filter(value => value !== newData[index]);
  this.setState({ data: newData });
};

【讨论】：