ant design中table组件的filter和sorter，如何在外部控制？

在table的onchange属性中，将filter和sorter放入state中

<Table
              columns={columns}
              dataSource={data}
              onChange={this.handleTableChange}
 />,

handleTableChange:

handleTableChange = (pagination, filters, sorter) => {
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  }

columns的设置

使用state中的filteredInfo和sortedInfo

const columns = [
      {
        title: '类型',
        key:'dbType',
        dataIndex: 'dbType',
        filters:[{text:"MySQL",value:"MySQL"},{text:"Oracle",value:"Oracle"}],
        filteredValue: filteredInfo.dbType || null,
        onFilter: (value, record) => record.dbType.includes(value),
      }，
      {
        title: '延迟时间(s)',
        key:'delay',
        dataIndex: 'delay',
        sorter: (a, b) => a.delay - b.delay,
        sortOrder: sortedInfo.columnKey === 'delay' && sortedInfo.order,
      }
    ];

外部使用

此处直接以reset为例，读者可自行设置fitleredInfo和sortedInfo的值来控制排序和筛选

handleFormReset = () => {
    const { form, dispatch } = this.props;
 
    form.resetFields();

    this.setState({
      filteredInfo: {},
      sortedInfo: {},
    });

    dispatch({
      ...
    });
  };

这样就能通过外部的按钮来控制筛选和排序了