React-实时搜索过滤器和搜索按钮

如何解决React-实时搜索过滤器和搜索按钮

我是React的新手，我试图创建一个实时搜索过滤器以及几个显示图像的按钮过滤器。现在，它获取类似JSON的虚拟数据。 我已经设法创建了实时搜索（如下代码中所示），但是我现在停留在其之上创建额外的过滤器。我想在实时搜索字段旁边有三个按钮，分别显示“全部”，“顶部”，“伟大”。 如何专门过滤以查找标签名称？在我的示例中，当我单击“顶部”或“出色”时，它应过滤原始列表并显示相关数据。 任何提示，不胜感激...谢谢！

import React,{ useState } from 'react';

function App() {
  const dataList = [
    {
      "id": 1,"tag": "Top","name": "bubb","image": "../img/bubb.jpg"
    },{
      "id": 2,"name": "lin bubb","tag": "Great","image": "../img/lin.jpg"
    },{
      "id": 3,"name": "smam","image": "../img/smam.jpg"
    },"name": "jumanji","image": ""
    },"name": "fruit spin","image": ""
    }
  ];

  const [searchText,setSearchText] = useState("");
  const [data,setData] = useState(dataList);


  // exclude column list from filter
  const excludeColumns = ["id","tag","image"];

  // handle change event of search input
  const handleChange = value => {
    setSearchText(value);
    filterData(value);
  };



    // filter records by search text
    const filterData2 = (value) => {
     //need to filter when tag selected
    }

    
  // filter records by search text
  const filterData = (value) => {
    const lowercasedValue = value.toLowerCase().trim();
    if (lowercasedValue === "") setData(dataList);
    else {
      const filteredData = dataList.filter(item => {
        return Object.keys(item).some(key =>
          excludeColumns.includes(key) ? false : item[key].toString().toLowerCase().includes(lowercasedValue)
        );
      });
      setData(filteredData);
    }
  }

  return (
    <div className="App">
      Search: <input
        style={{ marginLeft: 5 }}
        type="text"
        placeholder="Type to search..."
        value={searchText}
        onChange={e => handleChange(e.target.value)}
      />
      <span onClick={filterData2("all")}>All</span>
      <span onClick={filterData2("Top")}>Top</span>
      <span onClick={filterData2("Great")}>Great</span>
      
      <div className="Box-container">
        {data.map((data,i) => {
          return <div key={i} className="Box" style={{ backgroundColor: data.color }}>
            <img src={data.image}></img>
          </div>
        })}
        <div className="clearboth"></div>
        {data.length === 0 && <span>No records found to display!</span>}
      </div>
    </div>
  );
}

export default App;