如何阻止AntD日期选择器输入框回车事件冒泡（表格列过滤器场景）

当你在AntD表格列的filterDropdown中使用日期选择器时，回车事件会冒泡到表格列触发排序，可通过以下几种方式捕获并阻止冒泡：

方案一：直接给DatePicker绑定onKeyDown事件 #

AntD的DatePicker组件支持onKeyDown属性，直接在组件上监听回车事件并阻止冒泡：

<DatePicker
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.stopPropagation();
      // 若需要回车时触发筛选逻辑，可在此处调用表格的筛选方法
      // 比如：props.setFilter(/* 筛选值 */);
    }
  }}
/>

这种方式最简单，无需额外操作，适合大多数场景。

方案二：通过Ref获取输入框绑定事件 #

如果需要更精细地控制输入框事件，可通过Ref获取DatePicker内部的输入元素，手动绑定事件：

import { useRef, useEffect } from 'react';
import { DatePicker } from 'antd';

const DateFilter = (props) => {
  const datePickerRef = useRef(null);

  useEffect(() => {
    const inputEl = datePickerRef.current?.input;
    if (!inputEl) return;

    const handleKeyDown = (e) => {
      if (e.key === 'Enter') {
        e.stopPropagation();
      }
    };

    inputEl.addEventListener('keydown', handleKeyDown);
    return () => inputEl.removeEventListener('keydown', handleKeyDown);
  }, []);

  return <DatePicker ref={datePickerRef} />;
};

// 在表格列配置中使用
const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    filterDropdown: () => <DateFilter />,
    // 其他配置
  }
];

方案三：在筛选容器层阻止冒泡 #

如果希望整个筛选弹窗内的回车事件都不冒泡到表格列，可在外层容器上绑定onKeyDown事件：

const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    filterDropdown: () => (
      <div onKeyDown={(e) => {
        if (e.key === 'Enter') e.stopPropagation();
      }}>
        <DatePicker />
        <button onClick={() => {/* 确认筛选 */}}>确定</button>
      </div>
    ),
    // 其他配置
  }
];

需要注意的是，如果需要保留回车触发筛选的功能，在阻止冒泡后，要手动调用表格的筛选方法（比如通过filterDropdown的props中的setFilter方法），避免影响原有筛选逻辑。

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