0

我正在尝试实现多搜索过滤器。在我的反应表组件中，我已经在每列中有一个搜索栏。但我想要的是能够在同一列中搜索多个信息。例如，在搜索栏“姓名”中，我将输入“John Jane”，这意味着我要显示所有 Johns 和 Janes。另一个例子，在“id”列中，我输入“1 3”，我将不得不显示 id 1 和 3。

编号 | 姓名 | 年龄

1 | 约翰 | 17

2 | 简 | 9

3 | 玛丽 | 98

代码沙箱：https ://codesandbox.io/s/react-table-custom-filtering-forked-m4nnw?file=/index.js

import React from "react";
import { render } from "react-dom";
import { makeData } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const filterCaseInsensitive = (filter, row) => {
  const id = filter.pivotId || filter.id;
  if (row[id] !== null && typeof row[id] === "string") {
    return row[id] !== undefined
      ? String(row[id].toLowerCase()).startsWith(filter.value.toLowerCase())
      : true;
  } else {
    return String(row[filter.id]) === filter.value;
  }
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData(),
      filtered: [],
      loading: false
    };
  }

  onFilteredChangeCustom = (value, accessor) => {
    let filtered = this.state.filtered;
    let insertNewFilter = 1;

    if (filtered.length) {
      filtered.forEach((filter, i) => {
        if (filter["id"] === accessor) {
          if (value === "" || !value.length) filtered.splice(i, 1);
          else filter["value"] = value;

          insertNewFilter = 0;
        }
      });
    }

    if (insertNewFilter) {
      filtered.push({ id: accessor, value: value });
    }

    this.setState({ filtered: filtered });
  };

  render() {
    const { data, filtered, loading } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName"
                },
                {
                  Header: "Last Name",
                  id: "lastName"
                }
              ]
            },
            {
              Header: "Info",
              columns: [
                {
                  Header: "Age",
                  accessor: "age"
                },
                {
                  Header: "Over 21",
                  accessor: "age"
                }
              ]
            }
          ]}
          filterable
          showFilters={true}
          filtered={filtered}
          loading={loading}
          onFilteredChange={(filtered, column, value) => {
            this.onFilteredChangeCustom(value, column.id || column.accessor);
          }}
          defaultFilterMethod={filterCaseInsensitive}
          pageSizeOptions={[10, 30, 50, 100]}
          className="-striped -highlight"
          defaultPageSize={10}
        />
        <br />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
4

0 回答 0