和设计表 TypeScript getColumnSearchProps 示例

Question

我正在使用以下 ant 组件： https: //ant.design/components/table/ 并且我真的很难在表中添加以下搜索选项： 这是我到目前为止创建的表：

我对 React 和 Typescript 都很陌生，因为该项目不是在 js 中而是在 typescript 中，我无法让我的代码正常工作，查看 ant 文档；我已经将我的组件转变为功能组件，因为我将使用钩子并添加一些代码来消除大多数编译器错误（ts 的类型声明），但仍然有一些语法错误：

这是我的代码：

import React,  { Component, useState } from 'react';
import {connect} from "react-redux";

// @ts-ignore
import Highlighter from 'react-highlight-words';

//**External Libraries */
//REACT MOSAIC
import {ExpandButton, MosaicWindow, RemoveButton} from "react-mosaic-component";
import {MosaicBranch} from "react-mosaic-component/src/types";

//BLUEPRINTJS
import {InputGroup} from "@blueprintjs/core";

//ANTDESIGN
import { Table , Button  ,Tag , Input , Space} from "antd";
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import {CaretRightOutlined , SearchOutlined} from '@ant-design/icons';

//STYLES
import './styles.css'

//API
import {useGetAllUtenti} from '../../../api/index';
import { Utente } from '../../../api/types';

const  UserSummaryWindow: React.FC<any> = (props) => {

  //HOOKS STATE FOR TABLE SEARCH
  const [searchText , setSearchText] = useState('');
  const [searchedColumn , setSearchedColumn] = useState('');

  const {path} = props;

  const dataSource: Object | any = useGetAllUtenti().data;

  const ruoli: any = [
    {
      text: 'User',
      value: 'user',
    },
    {
      text: 'Administrator',
      value: 'administrator',
    },
    {
      text: 'NumeroVerde',
      value: 'numeroVerde',
    },
  ]

  const stati: any = [
    {
      text: 'Attivo',
      value: 1,
    },
    {
      text: 'Non Attivo',
      value: 0,
    }
  ]

  const columns: any = [

    {
      title: 'Nome',
      dataIndex: 'nome',
      key: 'nome',
      defaultSortOrder: 'descend',
      sorter: (a:any, b:any) => { return a.nome.localeCompare(b.nome)},
    },
    {
      title: 'Cognome',
      dataIndex: 'cognome',
      key: 'cognome',
      sorter: (a:any, b:any) => { return a.cognome.localeCompare(b.cognome)},
    },
    {
      title: 'Ruolo',
      dataIndex: 'ruolo',
      key: 'ruolo',
      filters: ruoli,
      onFilter: (value:any, record:any) => record.ruolo.indexOf(value) === 0,
      sorter: (a:any, b:any) => { return a.ruolo.localeCompare(b.ruolo)},
      render: (text: string) => (
        <>        
          {
                <Tag color={renderTagColor(text)}>
                  {text.toUpperCase()}
                </Tag>
          }
        </>)
    },
    {
      title: 'Gestore',
      dataIndex: 'gestore',
      key: 'gestore',
      sorter: (a:any, b:any) => { return a.gestore.localeCompare(b.gestore)},
    },
    {
      title: 'Username',
      dataIndex: 'username',
      key: 'username',
      sorter: (a:any, b:any) => { return a.username.localeCompare(b.username)},
    },
    // {
    //   title: 'Password',
    //   dataIndex: 'password',
    //   key: 'password',
    // },
    // {
    //   title: 'IDEnte',
    //   dataIndex: 'idEnte',
    //   key: 'idEnte',
    // },
    {
      title: 'Tipo',
      dataIndex: 'tipo',
      key: 'tipo',
      sorter: (a:any, b:any) => a.tipo - b.tipo,
    },
    {
      title: 'Stato',
      dataIndex: 'stato',
      key: 'stato',
      filters: stati,
      onFilter: (value:any, record:any) => record.stato.indexOf(value) === 0,
      sorter: (a:any, b:any) => a.stato - b.stato,
      render :(stato: number) => (
        <>
          {
            (stato == 1) ? 
              (
                <Tag color="#00cc00">
                  Attivo
                </Tag>
              ) :
              (
                <Tag color="#ff0000">
                  Non Attivo
                </Tag>
              ) 
          }
        </>)
    },
    {
      title: 'Ultimo aggiornamento password',
      dataIndex: 'ultimoAggiornamentoPassword',
      key: 'ultimoAggiornamentoPassword',
      sorter: (a:any, b:any) => a.ultimoAggiornamentoPassword.localeCompare(b.ultimoAggiornamentoPassword)
    },
    {
      title: '',
      dataIndex: 'idUtente',
      key: 'idUtente',
      render: () => (
        //da inserire link per andare al dettaglio / modifica utente
        <Button type="primary"><CaretRightOutlined /></Button>  
      ),
    },
  ]

  const toolbarControls = React.Children.toArray([
    <ExpandButton/>,
    <RemoveButton/>
  ]);

  function renderTagColor(text:string): string {
    switch(text) {
      case 'user':
        return 'gold';
      case 'administrator':
        return 'red';
      case 'numeroVerde':
        return 'green';
      default:
        return '';
    }
  }

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: (text:string) =>
      searchText === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text.toString()}
        />
      ) : (
        text
      ),
  });

  function handleSearch (selectedKeys:any, confirm:any, dataIndex:any) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  function handleReset (clearFilters:any) {
    clearFilters();
    setSearchText('');
  };

  return (
    <MosaicWindow<string>
      title="Riepilogo Utenti"
      path={path}
      toolbarControls={toolbarControls}
    >
      <Table 
      dataSource={dataSource} 
      columns={columns} 
      bordered={true}
      //pagination={{ pageSize:3,position: ['bottomCenter'] }}
      pagination={{position: ['bottomCenter'] }}
      rowKey={'idUtente'}
      //stile per righe striped
      rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' :  'table-row-dark'}
      />
    </MosaicWindow>
  );
};


export default UserSummaryWindow;

让我头疼的部分是（需要将其转换为打字稿[启用配置文件中的严格选项]）：

getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: (text:string) =>
      searchText === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text.toString()}
        />
      ) : (
        text
      ),
  });

我不是在这里要求您更正我的代码，只是想知道是否有人可以分享该 getColumnSearchProps 函数的打字稿实现，或者来自 ant design 的带有打字稿代码的表格组件的示例。

Answer 1

抱歉这么晚才回复，我也遇到了同样的问题。我在某人制作的 github 存储库上找到了解决方案。我真的很想知道为什么 antd 开发者现在不支持 typescript 。无论如何，这是回购协议。

https://github.com/freewind-demos/typescript-react-antd-table-search-column-demo

基本上，将旧 JS 代码转移到 Typescript 的所有艰苦工作都已完成，尽管到处都有一些 linting 错误。

我希望任何来寻找这个答案的人都真正质疑他们使用 antd 而不是 React-Table 或 Material-Design 的决定。