如何判断onFilterDropdownOpenChange触发对应的Table Column？

Ant Design 4.23.0新增的onFilterDropdownOpenChange回调确实只传递了展开/收起的布尔值参数，但你可以通过以下两种方式轻松拿到触发该回调的列的key或dataIndex：

方法1：利用闭包捕获列标识 #

在定义列配置时，让回调函数直接捕获当前列的key或dataIndex变量——不管是手动编写列配置，还是循环生成列，这种方式都能生效。

手动定义列示例： #

{
  dataIndex: 'id',
  key: 'id',
  onFilterDropdownOpenChange: (open: boolean) => {
    // 直接使用当前列的key或dataIndex
    console.log('触发列key:', 'id', '展开状态:', open);
    // 示例：更新状态记录当前展开的筛选列
    // setOpenColumns(prev => open ? [...prev, 'id'] : prev.filter(k => k !== 'id'))
  },
}

循环生成列示例（更高效）： #

如果列是通过数组循环生成的，闭包会自动捕获每一项的key值：

const columnKeys = ['id', 'name', 'age'];
const columns = columnKeys.map(key => ({
  dataIndex: key,
  key,
  onFilterDropdownOpenChange: (open: boolean) => {
    console.log('触发列:', key, '展开状态:', open);
    // 直接用key关联状态逻辑
  },
}));

方法2：自定义筛选下拉框监听状态 #

如果需要自定义筛选下拉框内容，可通过filterDropdown属性自定义组件，在组件内部直接监听展开状态，同时能直接使用列的标识：

{
  dataIndex: 'id',
  key: 'id',
  filterDropdown: ({ visible, setVisible }) => {
    React.useEffect(() => {
      console.log('触发列key:', 'id', '展开状态:', visible);
    }, [visible]);

    return (
      <div style={{ padding: 8 }}>
        {/* 放置自定义筛选内容 */}
      </div>
    );
  },
}

这两种方法都能完美解决你无法关联触发列的问题，可根据业务场景选择使用。

内容的提问来源于stack exchange，提问作者Jef Ceuppens