如何使用表外的搜索过滤器？

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 提供给Table 组件：

// Filtered data
<Table columns={columns} dataSource={this.state.dataSource} />

剩下要做的是添加过滤器组件，here is an example 用于三个基本的antd 组件：

• AutoComplete
• Input.Search
• AutoComplete 与 Input.Search

<>
  <Row>
    <Table columns={columns} dataSource={this.state.dataSource} />
  </Row>
  <Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
    <Col>
      <Typography>Name Auto Complete</Typography>
    </Col>
    <Col>
      <AutoComplete
        dataSource={data.map(person => person.name)}
        onChange={nameSearch =>
          this.setState({
            dataSource: data.filter(person => person.name.includes(nameSearch))
          })
        }
        allowClear
      />
    </Col>
  </Row>
  <Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
    <Col>
      <Typography>Name Search</Typography>
    </Col>
    <Col>
      <Input.Search
        allowClear
        onSearch={nameSearch =>
          this.setState({
            dataSource: data.filter(person => person.name.includes(nameSearch))
          })
        }
      />
    </Col>
  </Row>
  <Row type="flex" gutter={10}>
    <Col>
      <Typography>Auto Complete Search</Typography>
    </Col>
    <Col>
      <AutoComplete dataSource={data.map(person => person.name)}>
        <Input.Search
          allowClear
          onSearch={nameSearch =>
            this.setState({
              dataSource: data.filter(person =>
                person.name.includes(nameSearch)
              )
            })
          }
        />
      </AutoComplete>
    </Col>
  </Row>
</>;