React中Ant Design Table排序行为修改：仅点击图标触发排序

在React项目里用Ant Design Table时，要是给列标题加了筛选Input，点击输入框操作时会不小心触发列的排序——但我们本来只想点排序图标才执行这个逻辑。

直接给标题里的Input组件加个事件阻止冒泡就行，代码示例如下：

import { Table, Input } from 'antd';

const columns = [
  {
    title: (
      <div>
        用户名
        <Input
          placeholder="筛选用户名"
          onClick={(e) => e.stopPropagation()} // 关键：阻止事件冒泡，避免触发排序
          style={{ width: 120, marginLeft: 8 }}
        />
      </div>
    ),
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  // 其他列配置...
];

const dataSource = [
  { key: '1', name: '张三' },
  { key: '2', name: '李四' },
  { key: '3', name: '王五' },
];

export default function App() {
  return <Table columns={columns} dataSource={dataSource} />;
}

原理很简单：AntD Table把排序触发逻辑绑定在了整个列标题容器上，点击容器内的任何元素，事件都会向上冒泡触发排序。给Input加stopPropagation()，就能把事件拦在Input这一层，不会传到标题容器触发排序。如果标题里还有其他交互元素（比如筛选按钮），同样给它们加这个事件即可。

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