Antd Filter 下拉列表不会在反应中呈现 typescript

Question

我正在尝试在 antD 中使用自定义过滤器，使用与 typescript 的反应。它不呈现任何东西，我不知道我做错了什么。

这是我的 function 返回专栏道具：

const getColumnSearchProps = (dataIndex: string) => ({ 
    filterDropDown: 
    ({ 
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters 
    }: any) => (
      <div style={{ padding: 8 }}>
      <Input
        ref={ searchInput }
        placeholder={`Search ${dataIndex}`}
        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
        value={selectedKeys[0]}
      />
      <Space>
      <Button
        type="primary"
        onClick={() => handleSearch(selectedKeys, confirm)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button size="small" style={{ width: 90 }}>
        Reset
      </Button>
      <Button
        type="link"
        size="small"
      >
        Filter
      </Button>
      </Space>
    </div>
  ),
  filterIcon: (filtered: boolean) => (
    <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
  ),
  onFilterDropdownVisibleChange: (visible: boolean) => {
    if (visible) {
      setTimeout(() => searchInput.current?.select(), 100);
    }
  }
    })

这就是我传播这些道具的方式：

const columns: any = [
    {
      title: 'Name',
      dataIndex: 'candidate',
      key: "candidate",
      width: '16.66%',
      render: (name: string) => cellRender(name),
      ...getColumnSearchProps("name")
    }
....

我想像这样渲染过滤器：

Answer 1

您好，欢迎来到 Stackoverflow。 看起来您的 arguments 有一些不一致之处。 可能是由于从 AntD 示例中复制代码而没有更新所有必要的部分；-)

尝试改变

...getColumnSearchProps("name")

至

...getColumnSearchProps("candidate")

Answer 2

这是基于 AntD 文档的 TS 接口：

...    
filterDropdown: ({ 
             setSelectedKeys,
             selectedKeys,
             confirm,
             clearFilters 
        }: FilterDropdownProps) => {
 ...

export interface FilterConfirmProps {
   closeDropdown: boolean;
}
export interface ColumnFilterItem {
  text: React.ReactNode;
  value: string | number | boolean;
  children?: ColumnFilterItem[];
}
export interface FilterDropdownProps {
  prefixCls: string;
  setSelectedKeys: (selectedKeys: React.Key[]) => void;
  selectedKeys: React.Key[];
  confirm: (param?: FilterConfirmProps) => void;
  clearFilters?: () => void;
  filters?: ColumnFilterItem[];
  visible: boolean;
}

Answer 3

错误的命名是问题，“filterDropDown”而不是正确的“filterDropdown”。 例如，通过将ColumnsType<MyInterface>添加到列中，可以更容易地检测到类似的可能错误。

无论如何感谢您的回答！