Antd Table自定义FilterDropdown重置按钮失效问题求助

问题核心原因 #

你的代码存在两个关键问题：

• DatePicker未与selectedKeys做受控绑定，导致重置后UI仍显示之前选中的日期
• 调用clearFilters时未同步清空selectedKeys，筛选状态未完全重置

修复步骤 #

1. 让DatePicker成为受控组件 #

给DatePicker绑定value属性，关联selectedKeys，确保UI显示与筛选状态同步：

<DatePicker
  format={'DD-MMM-YYYY'}
  // 将selectedKeys的值转为moment对象作为DatePicker的value
  value={selectedKeys[0] ? moment(selectedKeys[0], 'DD-MMM-YYYY') : null}
  onChange={(e) => {
    setSelectedKeys(e ? [e.format('DD-MMM-YYYY')] : [])
  }}
  allowClear={false}
/>

2. 完善重置逻辑 #

修改handleReset函数，在调用clearFilters的同时清空selectedKeys，确保筛选状态和UI完全重置：

const handleReset = (clearFilters, setSelectedKeys) => {
  setSelectedKeys([])
  clearFilters()
}

然后在FilterDropdown的重置按钮中传入setSelectedKeys：

<Button
  type="primary"
  onClick={() => handleReset(clearFilters, setSelectedKeys)}
  size="small"
  icon={<Filter />}
  style={{ width: 90 }}
>
  Reset
</Button>

3. 可选：移除冗余的Form组件 #

如果你的筛选器不需要表单校验或提交逻辑，直接去掉Form组件可以避免不必要的干扰：

<div style={{ padding: 8 }}>
  <DatePicker
    // ... 其他属性
  />
  <Button
    // ... 筛选按钮属性
  ></Button>
  <Button
    // ... 重置按钮属性
  >
    Reset
  </Button>
</div>

完整修复后的代码示例 #

const handleSearch = (selectedKeys, confirm) => {
  confirm()
}

const handleReset = (clearFilters, setSelectedKeys) => {
  setSelectedKeys([])
  clearFilters()
}

const getColumnSearchProps = (dataIndex) => ({
  filterDropdown: ({
    setSelectedKeys,
    selectedKeys,
    confirm,
    clearFilters,
  }) => (
    <div style={{ padding: 8 }}>
      <DatePicker
        format={'DD-MMM-YYYY'}
        value={selectedKeys[0] ? moment(selectedKeys[0], 'DD-MMM-YYYY') : null}
        onChange={(e) => {
          setSelectedKeys(e ? [e.format('DD-MMM-YYYY')] : [])
        }}
        allowClear={false}
      />

      <Button
        type="primary"
        onClick={() => handleSearch(selectedKeys, confirm)}
        icon={<Filter />}
        size="small"
        style={{ width: 90, margin: '8px 4px 0 0' }}
      >
        筛选
      </Button>
      <Button
        onClick={() => handleReset(clearFilters, setSelectedKeys)}
        size="small"
        icon={<Filter />}
        style={{ width: 90, margin: '8px 0 0' }}
      >
        Reset
      </Button>
    </div>
  ),
  filterIcon: (filtered) => (
    <Filter style={{ color: filtered ? '#1890ff' : undefined }} />
  ),
  onFilter: (value, record) => {
    return moment(record[dataIndex]).format('DD-MMM-YYYY') === value
  },
})

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