如何在 React 中创建带有选择组件的过滤器？

Question

我已经开始在 firebase 的帮助下做 React pp。到目前为止，我设法获取了所有数据并实现了搜索功能。我想添加一个搜索价格和标题的功能。你能帮帮我吗？我已经设置了状态并选择了 onCHange，但不确定如何进一步处理。任何想法都非常受欢迎。 perNight 存储在 Information 组件中，因此我认为它必须从那里呈现，但接下来呢？ 谢谢你， 到目前为止，这是我的代码：

import { DocumentData, onSnapshot, QuerySnapshot } from "firebase/firestore";
import { useEffect, useState } from "react";
import { hotelsCollection } from "../lib/controller";
import { NewHotelType } from "../types/hotel";
import Information from "./Information";


function Card() {
  const [hotels, setHotels] = useState<NewHotelType[]>([]);
  const [search, setSearch] = useState("")
  const [filter, setFilter] = useState('All');

  useEffect(
    () =>
      onSnapshot(hotelsCollection, (snapshot: QuerySnapshot<DocumentData>) => {
        setHotels(
          snapshot.docs.map(doc => {
            return {
              id: doc.id,
              ...doc.data(),
            };
          })
        );
      }),
    []
  );

  return (
    <div className="card">

      <select onChange={(e) => setFilter(e.target.value)}>
        <option value="Filter By">Filter By</option>
        <option value="perNight">perNight</option>
        <option value="title">title</option>
      </select>


      <div className="search">
        <input className="inputsearch" 
        value={search} type="text" placeholder="Search for the hotel" onChange={(e) => setSearch(e.target.value)}
        />
    </div>
    {hotels && hotels.length ? (
      <div>
    {hotels?.filter((item:NewHotelType) => {
          if (search === "" && !search.length) {
            return item;
          }
          return item?.title === search;
        })
        ?.map((hotel:NewHotelType) => (<Information key={hotel.id} hotel={hotel}
        /> 
        ))}
        </div>
    ):
    <h2 className="no-hotels">There are no hotels</h2>
}
    </div>
  );
}

export default Card;

Answer 1

你可以试试这个代码

const [data,setData] = useState([]) //Fetch your data and store here

const [filters, setFilters] = useState({
    category: '',
  }); 
 
const [searchTerm, setSearchTerm] = useState("");

const displayProduct = data
.filter(prod =>
    prod.category.includes(filters.category) 
  ) //Filter by click on a button
.filter((data)=>{
    if (searchTerm == ""){
        return data
    }else if(data.title.replaceAll(/\s/g,'').toLowerCase().includes(searchTerm.toLowerCase().replaceAll(/\s/g,''))){
        return data
    } //Filter by input a title
})
.map(data => {
    return(
        <div class="" key={data.id}>
           <h1>{data.title}</h1>
        </div>
    )
})

return(
      <div>
          <input type="radio" name='category' onClick={() => {setFilters({...filters,category: 'YOUR CATEGORY',})}} /> //This will filter when you click on the radio button
          <input  onChange={event => {setSearchTerm(event.target.value)}} /> //Search by title

          <div>
            {displayProduct}
          </div>
      </div>
)