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>添加到列中，可以更容易地檢測到類似的可能錯誤。

無論如何感謝您的回答！