如何从表格外部使用搜索过滤器？

Question

我正在使用antd表。有没有一种方法可以在表外添加搜索过滤器并仍然在表中搜索？

Demo。

我在表格上方添加了一个输入字段。但是我不明白如何将其链接到antd可用的搜索功能。我还为每列添加了搜索过滤器，但也想在外部添加一个单独的字段。列过滤器工作正常。

为便于参考，我还在此处粘贴了演示代码：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Icon } from "antd";
import Highlighter from "react-highlight-words";

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Joe Black",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Jim Green",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: 32,
    address: "London No. 2 Lake Park"
  }
];

class App extends React.Component {
  state = {
    sRT: ""
  };

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          //value={selectedKeys[0]}
          onChange={e =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" 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 => (
      <Highlighter
        highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
        searchWords={[this.state.sRT]}
        autoEscape
        textToHighlight={text.toString()}
      />
    )
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ sRT: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ sRT: "" });
  };

  render() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        width: "30%",
        ...this.getColumnSearchProps("name")
      },
      {
        title: "Age",
        dataIndex: "age",
        key: "age",
        width: "20%",
        ...this.getColumnSearchProps("age")
      },
      {
        title: "Address",
        dataIndex: "address",
        key: "address",
        ...this.getColumnSearchProps("address")
      }
    ];
    return (
      <div>
        <Input type="text" placeholder="search" />
        <Table columns={columns} dataSource={data} />;
        <br />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

您需要添加其他状态：

1. 已过滤数据的状态dataSource
2. Input值的状态：nameSearch

state = {
  sRT: "",
  dataSource: data,
  nameSearch: ""
};

进行过滤时，将dataSource供给{​​{1}}组件：

Table

剩下要做的就是为三个基本// Filtered data <Table columns={columns} dataSource={this.state.dataSource} /> 组件添加过滤器组件here is an example：

• antd
• AutoComplete
• Input.Search与AutoComplete

Input.Search