Antd中使用Table的rowSelection筛选功能，搭配检索选择需求实现

需求背景：需要一个列表能通过页面检索实现模糊查询，同时进行选择筛选

思路：通过Table组件的rowKey将列表选中项集合定位成一个code或者key集合，然后再模糊查询筛选列表时，不断地更新这个集合，最终再用户查询筛选的最后，将这个集合传给后端。

上代码

class RecordChecks extends React.Component<Props, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      dataAll: [{
        code: 'code1',
        name: '数据一'
      }, {
        code: 'code2',
        name: '数据二'
      }, {
        code: 'code3',
        name: '数据三'
      }, {
        code: 'code4',
        name: '数据四'
      }, {
        code: 'code5',
        name: '数据五'
      }], // 列表数据
      temporaryData: [], // 暂存未被模糊查询前的数据集合
      selectedRowKeys: ['code3', 'code4'], // 默认选中项，现实情况一般由后端返回
    };
  }
  componentDidMount(): void {
    this.setState({ temporaryData: this.state.dataAll }) // 一开始 将会被模糊查询调整的数据先保存一遍
  }
  seachChange = (e: any) => {
    let data = e.target.value, array: any = []
    const { dataAll, temporaryData } = this.state;
    if (dataAll && Array.isArray(dataAll) && dataAll.length > 0) {
      dataAll.map((item: any) => {  // 模糊查询
        if (item.code.indexOf(`${data}`) > -1 || item.name.indexOf(`${data}`) > -1) {
          array.push(item)
        }
      })
      if (!e.target.value) { //数据为空时，将一开始未筛选的数据重新展示
        array = temporaryData
      }
      this.setState({ dataAll: array })
    }
  }
  render() {
    const column2: any = [{
      dataIndex: 'code',
      title: '值',
    }, {
      dataIndex: 'name',
      title: '名称',
    }]

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        this.setState({ selectedRowKeys, selectedRows })
      },
    };

    return (
      <div>
        <span>检索：</span>
        <Input onChange={this.seachChange} ></Input>
        <Table
          columns={column2}
          dataSource={this.state.dataAll}
          rowKey={(record: any, index) => `${record.code}`}
          rowSelection={rowSelection}
        ></Table>
      </div >
    );
  }
}