时间戳

首页 > 解决方案 > 当复选框选中过滤数据时做出反应

reactjs - 当复选框选中过滤数据时做出反应

问题描述

如果您正在搜索游戏，则在游戏页面上，页面将重定向到搜索结果页面。我想在搜索结果页面上进行过滤。当我选中复选框时，数据将被过滤。

json格式在这里

{"id": 26,
"title": "ebirth",
"sortName": "",
"isFullyOptimized": false,
"steamUrl": "",
"store": "",
"publisher": "",
"genres": ["Action", "Simulation"],
"status": "AVAILABLE"}

我有一个备用菜单组件，有复选框。当我在这里选中复选框时，我希望按类型和状态过滤到我的搜索结果。从此处搜索结果返回的数据

{gameIds.length > 0 && (
    <div className="search-result__content">
      <div className="search-result__title">
        <h2>Search Results</h2>
        <span>{data.filter(({ id }) => gameIds.includes(id)).length} results</span>
      </div>
      <div className="game-card__content">
        {data
          .filter(({ id }) => gameIds.includes(id))
          .map((item, i) => {
            return (
              <a key={i} href={item.steamUrl} className={item.steamUrl && "has-url" ? "has-url" : ""}>{item.title}</a>
            );
          })}
      </div>
    </div>
  )}

我怎样才能做到这一点？

这是代码

https://codesandbox.io/s/strange-bardeen-pf1k0

标签： reactjsreact-hooks

解决方案

推荐阅读