Ant Design Table表头输入框点击时阻止排序的简便解决办法

问题根源在于输入框的点击事件会冒泡到表头单元格（th），而Ant Design Table的排序逻辑正是绑定在th的点击事件上。e.preventDefault()只能阻止元素的默认行为，无法阻止事件冒泡，所以无效。

最简便的解决方法是阻止输入框的点击事件向上冒泡：

在表头的Input组件中添加onClick={(e) => e.stopPropagation()}，如果仍有问题，可以补充onMouseDown={(e) => e.stopPropagation()}（因为Table的排序可能监听的是mousedown事件）。

修改后的代码示例：

columns: [
  {
    title: (
      <Input
        placeholder="搜索名称"
        onClick={(e) => e.stopPropagation()}
        onMouseDown={(e) => e.stopPropagation()}
      />
    ),
    dataIndex: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  // 其他列...
]

这样点击输入框时，事件就不会传递到父级的th元素，自然不会触发排序逻辑。

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