Question

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

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

Answer 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 });
};

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

1 个答案: