Question

我有以下代码来显示.json文件中的数据，我也有一个搜索文本框，它从first_name字段中搜索数据，但是我想从first_name，last_name和Department中进行搜索，我也想使用按钮过滤搜索结果。

单击“名字”按钮时，将隐藏姓氏和部门的搜索结果，否则搜索将仅基于名字，部门按钮单击时将显示基于部门的结果...

我有代码here

constructor(props) {
  super(props);
  this.state = {
    page: 2,
    itemsPerPage: 10,
    data: cardData.data.Table,
    filteredData: cardData.data.Table
  };
  this.items = createItems(100);
}

搜索过滤器功能

onSearchTextChange = searchText => {
  const newData = this.state.data.filter(
    item =>
      typeof item.name === "string" &&
      item.first_name.toLowerCase().includes(searchText.toLowerCase())
  );

  this.setState({
    filteredData: newData
  });
};

显示来自filteredData

的值

<List divided>
  {this.state.filteredData.map(results => (
    <div className="col-sm-3">
      <div>
        <div className="body">
          <img
            class="pic"
            src={`data:image/jpeg;base64,${results.Photo}`}
            onerror="this.style.display='none'"
          />
          <h3 className="title">{results.first_name}</h3>
          <h3 className="title">{results.last_name}</h3>
          <div className="row">
            <div className="col-md-3 col-sm-6">
                              {results.Department}
            </div>
          </div>


        </div>
      </div>
    </div>
  ))}
</List>

Answer 1

如果要使用所有属性进行过滤，请添加更多条件以使用多个属性进行过滤

filter.(item => (item.last_name === text) || (item.first_name === text) || (item.department === text));

要基于按钮单击来过滤键，请添加新变量以声明状态，并在按钮上单击以将该值设置为您要过滤的值。

state : { filterKey: 'all' }

单击按钮，将值更新为您的过滤器值。

this.setState({ filterKey: 'last_name'});

更新onSearchTextChange以使用多个属性进行搜索。

onSearchTextChange = searchText => {

  if (this.state.filterKey && this.state.filterKey !== "all") {

    this.setState({
      filteredData: this.state.data.filter(
        item =>
          typeof item[this.state.filterKey] === "string" &&
          item[this.state.filterKey]
            .toLowerCase()
            .includes(searchText.toLowerCase())
      ),
      searchValue: searchText
    });

    return;
  }

  const newData = this.state.data.filter(
    item =>
      (typeof item.first_name === "string" &&
        item.first_name.toLowerCase().includes(searchText.toLowerCase())) ||
      (typeof item.last_name === "string" &&
        item.last_name.toLowerCase().includes(searchText.toLowerCase())) ||
      (typeof item.Department === "string" &&
        item.Department.toLowerCase().includes(searchText.toLowerCase())) ||
      (typeof item.Supervisor === "string" &&
        item.Supervisor.toLowerCase().includes(searchText.toLowerCase()))
  );

  this.setState({
    filteredData: newData,
    searchValue: searchText
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script>

const data = [
  {
    id: "1001",
    first_name: "Alez",
    last_name: "Dara",
    Department: "IT",
    Supervisor: "Supervisor A"
  },
  {
    id: "1002",
    first_name: "Baro",
    last_name: "bara",
    Department: "Accounting",
    Supervisor: "Supervisor A"
  },
  {
    id: "1003",
    first_name: "Tata",
    last_name: "uara",
    Department: "IT",
    Supervisor: "Supervisor A"
  },
  {
    id: "1004",
    first_name: "test 4",
    last_name: "Mara",
    Department: "Sales",
    Supervisor: "Supervisor C"
  },
  {
    id: "1005",
    first_name: "alex",
    last_name: "gara",
    Department: "Sales",
    Supervisor: "Supervisor C"
  },
  {
    id: "1006",
    first_name: "ki",
    last_name: "tara",
    Department: "IT",
    Supervisor: "Supervisor A"
  }
];
  
</script>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: data,
      filteredData: data,
      filterKey: "all",
      searchValue: ""
    };
  }

  changeFilter = filterKey => {
    this.setState(
      {
        filterKey: filterKey
      },
      () => this.onSearchTextChange(this.state.searchValue)
    );
  };

  onSearchTextChange = searchText => {
    if (this.state.filterKey && this.state.filterKey !== "all") {
      this.setState({
        filteredData: this.state.data.filter(
          item =>
            typeof item[this.state.filterKey] === "string" &&
            item[this.state.filterKey]
              .toLowerCase()
              .includes(searchText.toLowerCase())
        ),
        searchValue: searchText
      });

      return;
    }

    const newData = this.state.data.filter(
      item =>
        (typeof item.first_name === "string" &&
          item.first_name.toLowerCase().includes(searchText.toLowerCase())) ||
        (typeof item.last_name === "string" &&
          item.last_name.toLowerCase().includes(searchText.toLowerCase())) ||
        (typeof item.Department === "string" &&
          item.Department.toLowerCase().includes(searchText.toLowerCase())) ||
        (typeof item.Supervisor === "string" &&
          item.Supervisor.toLowerCase().includes(searchText.toLowerCase()))
    );

    this.setState({
      filteredData: newData,
      searchValue: searchText
    });
  };

  render() {
    return (
      <div>
        <div className="menubar">
          <button onClick={() => this.changeFilter("all")}>All</button>
          <button onClick={() => this.changeFilter("last_name")}>
            Last Name
          </button>
          <button onClick={() => this.changeFilter("Department")}>
            Department
          </button>
        </div>
        {this.state.filteredData.map((person, i) => (
          <div className="profilecard" key={i}>
            <div className="profilecontent">
              <ul>
                <li>
                  <strong>First Name:</strong> {person.first_name}
                </li>
                <li>
                  <strong>Last Name:</strong> {person.last_name}
                </li>
                <li>
                  <strong>Department:</strong> {person.Department}
                </li>
                <li>
                  <strong>Supervisor:</strong> {person.Supervisor}
                </li>
              </ul>
            </div>
          </div>
        ))}

        <input
          placeholder={`search ${this.state.filterKey}`}
          onChange={e => this.onSearchTextChange(e.target.value)}
          value={this.state.searchValue}
        />
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

如何过滤搜索结果？

1 个答案: