如何使用过滤器按钮过滤 React 中的搜索结果？

Posted 2023-02-21

【中文标题】如何使用过滤器按钮过滤 React 中的搜索结果？

【英文标题】：How to filter a search result in React with filter button?

【发布时间】：2021-07-22 19:26:30

【问题描述】：

如何使用 react 和 firebase 过滤搜索结果？ 我的这段代码运行良好，每次我输入一个字母都会显示我的 firebase 数据搜索结果

import React,  Component  from 'react';
import  Link  from 'react-router-dom';
import './App.css';
import firebase from './Firebase';


class App extends Component 
  constructor(props) 
    super(props);
    this.ref = firebase.firestore().collection('Products');
    this.unsubscribe = null;
    this.state = 
      filter: "",
      Products: []
    ;
  

  onCollectionUpdate = (querySnapshot) => 
    const Products = [];
    querySnapshot.forEach((doc) => 
      const  title, status  = doc.data();
      Products.push(
        key: doc.id,
        doc, // DocumentSnapshot
        title,
        status
      );
    );
    this.setState(
      Products
   );
  

  handleChange = event => 
    this.setState( filter: event.target.value );
  ;

  componentDidMount() 
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  

  render() 
    const  filter, Products  = this.state;
    const lowercasedFilter = filter.toLowerCase();
    const filteredData = Products.filter(item => 
      return Object.keys(item).some(key =>
        typeof item[key] === "string" && item[key].toLowerCase().includes(lowercasedFilter)
      );
    );

    return (
      <div class="container">
        <div class="panel panel-default">

          <input value=filter onChange=this.handleChange placeholder="Search Book"/>
          <div class="panel-body">
            <table class="table table-stripe">
              <thead>
                <tr>
                  <th>Title</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                filteredData.map(item => (
                  <tr>
                    <td><Link to=`/show/$item.key`>item.title</Link></td>
                    <td>item.status</td>
                  </tr>
                ))
              </tbody>
            </table>
          </div>

        </div>
      </div>
    );
  


export default App;

但现在我想添加另一个过滤器，专门根据我的 firebase Product.status 中的状态过滤这本书。 像这样的，

<input value=filter onChange=this.handleChange placeholder="Search Book"/>
<select className="ml-2 mb-2">
 this.state.Products.map(Products => (
  <option onClick=???>Products.status</option>
 ));
</select>

我该怎么做？我应该在这里写什么onClick=??? 以使结果只显示选定的状态和键入的关键字。

【参考方案1】：

您可以像这样根据集合的节点值进行数组搜索

const thfilteredData = firebase_data.filter((name) => 
name = name.toLowerCase();
       return name.includes(value.toLowerCase());
   );
setFiltredRestaurants(thfilteredData);

我已经使用名称来匹配子节点的名称值。您可以将它放在搜索输入的 onChange 或 onClick 中，您可以创建一个函数并传递选项值以进行匹配。在您的情况下，这可能如下所示。

filterProducts = (status) => 
    const thfilteredData = Products.filter((productstatus) => productstatus === status);
    this.setState(
        filteredData: thfilteredData
    );

【讨论】：

谢谢Tareq，但我是react 的初学者，并没有真正掌握react 中的大部分命令。你能不能把整个代码写给我，这样我就可以学习替换什么了。如果你这样做，我真的很感激。

@RedFrog 我已经通过状态检查更新了我的答案。但这并不好仅仅复制和害虫。因此，请使用更新后的第二个示例并尝试将其与您的代码一起使用。

@RedFrog 另一件事是使用 onChange 事件为您的 select 获取选定的选项值并调用该函数来更新您过滤的产品。

@RedFrog 您能否将您的问题的解决方案发布为答案并接受它？这项措施将提高未来用户寻找类似问题的知名度。提前致谢！