使用 antd 使用 DatePicker 的表过滤器答案

【问题标题】：Table Filter with DatePicker using antd使用 antd 使用 DatePicker 的表过滤器
【发布时间】：2022-02-03 13:09:39
【问题描述】：

以下是 Ant 设计表的代码，其中使用 DatePicker 过滤对象但无法过滤出和重置和过滤按钮也不起作用任何人都可以帮我解决这个问题。

CodeSandbox 编辑器链接：https://codesandbox.io/s/customized-filter-panel-antd-4-18-4-forked-lzuru?file=/index.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, DatePicker, Button, Space } from "antd";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "@ant-design/icons";
const data = [
  {
    key: "1",
    name: "John Brown",
    date: "2022-01-27T00:00:00Z",
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Joe Black",
    date: "2022-01-27T00:00:00Z",
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Jim Green",
    date: "2022-01-25T00:00:00Z",
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: "2022-01-22T00:00:00Z",
    address: "London No. 2 Lake Park"
  }
];

class App extends React.Component {
  state = {
    searchText: "",
    searchedColumn: ""
  };

  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => (
      <div style={{ padding: 8 }}>
        <Space>
          <DatePicker
            // format={"DD-MM-YY"}
            onChange={(e) => {
              setSelectedKeys([e.format("YYYY-MM-DDT00:00:00Z")]);
            }}
            
            allowClear={false}
          />
        </Space>
        <Space>
          <Button
            type="primary"
            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          {/* <Button
            onClick={() => this.handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            Reset
          </Button> */}
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({ closeDropdown: false });
              this.setState({
                searchText: selectedKeys[0],
                searchedColumn: dataIndex
              });
            }}
          >
            Filter
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value, record) =>{
      return(
        record[dataIndex]
        ? record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase())
        : ""

      )
    },
     


    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        // setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: (text) =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ""}
        />
      ) : (
        text
      )
  });

  handleSearch = (selectedKeys, confirm, dataIndex) => {
    console.log(selectedKeys, confirm, dataIndex);
    confirm();
    this.setState({
      searchText: selectedKeys[0],
      searchedColumn: dataIndex
    });
  };

  handleReset = (clearFilters) => {
    clearFilters();
    // console.log(this.state.searchText);
    this.setState({ searchText: "" });
  };

  render() {
    console.log(this.state.searchText);
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        width: "30%"
      },
      {
        title: "Date",
        dataIndex: "date",
        key: "date",
        width: "20%",
        ...this.getColumnSearchProps("date")
      }
    ];
    return <Table columns={columns} dataSource={data} />;
  }
}

【问题讨论】：

标签： reactjs antd

【解决方案1】：

首先，将日期作为字符串进行比较是个坏主意。或者您只想比较日期而不比较时间的用例，您可以使用 isSame() 比较日期。

要重置过滤器状态，您可以使用受控状态来清除过滤器，如antd clear filter example所示

【讨论】：

【解决方案2】：

您可以使用时刻来比较日期和过滤器

getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
  setSelectedKeys,
  selectedKeys,
  confirm,
  clearFilters
}) => (
  <div style={{ padding: 8 }}>
    <Space>
      <DatePicker
        // format={"DD-MM-YY"}
        onChange={(e) => {
          setSelectedKeys([e]);
        }}
        allowClear={true}
      />
    </Space>
    <Space>
      <Button
        type="primary"
        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button
        onClick={() => this.handleReset(clearFilters)}
        size="small"
        style={{ width: 90 }}
      >
        Reset
      </Button>
      <Button
        type="link"
        size="small"
        onClick={() => {
          confirm({ closeDropdown: false });
          this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex
          });
        }}
      >
        Filter
      </Button>
    </Space>
  </div>
),
filterIcon: (filtered) => (
  <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) => {
  return (
    moment(record[dataIndex]).format("DD-MM-YYYY") ===
    value.format("DD-MM-YYYY")
  );
},

【讨论】：