过滤获取数据到复选框react.js

问题描述 投票:0回答:1

也许有人知道如何过滤复选框中的数据。 我已经有一个标签过滤器,但我不知道如何对其进行转换以额外过滤我的价格。
我需要按价格过滤,例如我的价格为 $ 9.99、$ 24.49 和 $ 19.98 $ 20.00 - 我需要制作一个过滤器:
“<$ 10", "$ 10- $ 20", "> $ 20”

此处演示:https://codesandbox.io/s/blissful-sound-b3vm3?file=/src/App.js

从 data.json 获取数据


  function search(data) {
    return data.filter(
      (item) =>
        (filterParam === 'All' || item.tags.includes(filterParam)) &&
        (searchParam.length === 0 ||
          (searchParam.every((tag) => item.tags.includes(tag)) &&
            JSON.stringify(item).toLowerCase().indexOf(q.toLowerCase()) > -1))
    )
  }
reactjs database filter
1个回答
1
投票

添加第二个过滤器和状态对象,并按新参数进行过滤。

const [priceFilterParam, setPriceFilterParam] = useState("All");

function search(data) {
  return data.filter(
    ...
  ).filter(item => {
    const price = parseFloat(item.price.substring(1));
    return (priceFilterParam === "All") ||
      (priceFilterParam === "Low" && price <= 10) || 
      (priceFilterParam === "Medium" && price > 10 && price <= 20) ||
      (priceFilterParam === "High" && price > 20)
  })
}
© www.soinside.com 2019 - 2024. All rights reserved.