如何更改 React 应用程序中 Ant Design Table 中的排序器行为（仅在单击图标时排序）

Question

如何在单击列标题时禁用排序并仅通过单击图标启动排序？

import React, { useState } from "react";
import { Table, Input } from "antd";
import type { TableColumnsType, TableProps } from "antd";
import { SearchOutlined } from "@ant-design/icons";

interface DataType {
  key: React.Key;
  name: string;
  chinese: number;
  math: number;
  english: number;
}

const App: React.FC = () => {
  const [valueMath, setValueMath] = useState("");

  const FilterByMathInput = (
    <>
      <Input
        placeholder="Search Math"
        value={valueMath}
        onChange={(e) => {
          const currValue = e.target.value;
          setValueMath(currValue);
        }}
      />
    </>
  );

  const columns: TableColumnsType<DataType> = [
    {
      title: "Name",
      dataIndex: "name",
    },
    {
      title: "Chinese Score",
      dataIndex: "chinese",
      sorter: {
        compare: (a, b) => a.chinese - b.chinese,
        multiple: 3,
      },
    },
    {
      title: FilterByMathInput,
      dataIndex: "math",
      sorter: {
        compare: (a, b) => a.math - b.math,
        multiple: 2,
      },
    },
    {
      title: "English Score",
      dataIndex: "english",
      sorter: {
        compare: (a, b) => a.english - b.english,
        multiple: 1,
      },
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      name: "John Brown",
      chinese: 98,
      math: 60,
      english: 70,
    },
    {
      key: "2",
      name: "Jim Green",
      chinese: 98,
      math: 66,
      english: 89,
    },
    {
      key: "3",
      name: "Joe Black",
      chinese: 98,
      math: 90,
      english: 70,
    },
    {
      key: "4",
      name: "Jim Red",
      chinese: 88,
      math: 99,
      english: 89,
    },
  ];

  const onChange: TableProps<DataType>["onChange"] = (
    pagination,
    filters,
    sorter,
    extra
  ) => {
    console.log("params", pagination, filters, sorter, extra);
  };

  return (
    <Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
  );
};

export default App;

在 codesandbox.io

上尝试一下

这是截图

每次单击输入 (1) 时都会执行排序，但我希望仅在单击排序图标 (2) 时进行排序。

我为什么要寻找这个功能？我需要向某些列添加过滤功能，一切都已准备就绪，但是当您单击输入来更改查询时，它每次都会对表进行排序。

我试图在 Ant Design 官方网站和 github 页面上找到任何有关它的信息 - 没有有用的信息。

Answer 1

我认为您无法从输入交互中禁用列排序，但您可以尝试阻止单击事件从

Input

传播到切换排序的底层列标题按钮。

添加一个

onClick

处理程序并在单击事件对象上调用

stopPropagation

。

示例：

const FilterByMathInput = (
  <Input
    placeholder="Search Math"
    value={valueMath}
    onClick={(e) => e.stopPropagation()} // <-- don't propagate click up
    onChange={(e) => {
      const currValue = e.target.value;
      setValueMath(currValue);
    }}
  />
);

AntD 似乎有几个用于列过滤的选项，并且由于它通常是一种 UI/UX 反模式来渲染交互元素（即

input

），在其他交互元素（即

button

）内，您可能想探索您的过滤选项。有关示例，请参阅有关过滤器和排序器的文档。