antd-table filterDropdowm封装 自定义筛选框

需求

现在有一个在table里面做筛选的需求，在antd的table文档里很容易找到相关API，在官方的例子中是用filters定义菜单数据，用onFilter监控变化。
官方例子：

{
title: 'Address',
dataIndex: 'address',
filters: [
  {
    text: 'London',
    value: 'London',
  },
  {
    text: 'New York',
    value: 'New York',
  },
],
onFilter: (value, record) => record.address.indexOf(value) === 0,
},

我们的项目前端做了分页，在前端做筛选是不合适的，数据集不完整；所以筛选是在后端做的，我们需要的是让请求带上筛选字段传过去。

onFilter/onChange

刚开始我想当然在onFilter里做，因为onFIlter可以拿到当前筛选的value，但是在控制台发现在筛选操作时发出了很多条相同的请求。
看了下onFilter的源码：

可以看到onFilter是对data里的每一个record，也就是每条列表数据执行一次onFilter方法，如果把后端交互写在onFilter中，就会执行多次。所以不能使用onFilter。
这时候我想使用的是Table的onChange，这个函数有三个入参，pagination、filter和sort，也就是可以监听table的页码、筛选和排序信息，但是由于我们项目的pagination是自定义的类，如果用onChange，要多做一些antd内置pagination和自定义pagination类的判断，不然就会有冗余请求。

filterDropdown

最后选择使用filterDropdown这个属性，也就是自定义筛选菜单，交互也是自己写，自由度很高。为了可复用性高，将其封装为一个函数。
该函数仅需传入筛选操作发生时要执行的函数，其他参数从antd给的props里取。由此依然可以用antd的filters等api。返回一个完整的菜单组件。

// 封装的filterDropdown函数，
export const getColumnCheckboxGroupFilterDropdown = (onSearch: (value: string[]) => void) => (
  props: FilterDropdownProps
) => {
  const { setSelectedKeys, selectedKeys, filters, confirm, clearFilters } = props;
  const onChange = (checkedValues: string[]) => {
    setSelectedKeys(checkedValues);
  };
  const clear = () => {
    setSelectedKeys([]);
    onSearch([]);
    clearFilters();
  };
  const onOk = () => {
    onSearch(selectedKeys as string[]);
    confirm();
  };
  return (
    

      
        {filters?.map((item) => (
          
            {item.text}
          
        ))}
      
      
      

        
          Reset
        
        
          OK
        
      
    
  );
};

// 在定义table column时使用
{
  dataIndex: 'sth',
  title: 'title',
  filters: [
    {
      text: 'filter1',
      value: 'filter1',
    },
    {
      text: 'filter2',
      value: 'filter2',
    },
  ],
  filterDropdown: getColumnCheckboxGroupFilterDropdown(
    // onSearch func like setData 
  ),
};