javascript - React/JS 中的搜索过滤器

Question

我正在使用 React 来map通过一系列数据显示在页面上的卡片中。我要做的是实现搜索/过滤功能，这样当用户输入“二头肌”时，他们只会看到包含“二头肌”一词的卡片。理想情况下，我想搜索整张卡片，包括描述。无论我尝试什么，我都无法让搜索栏对卡片产生任何影响。我没有收到任何错误消息，但是当我搜索任何内容时，没有任何卡片被过滤掉，即使它们不包含搜索词。

这是 CodeSandbox 链接。我尝试使用的搜索功能如下：

function mySearchFunction() {
  var input, filter, div, dl, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDiv");
  dl = div.getElementsByTagName("dl");
  for (i = 0; i < dl.length; i++) {
    a = dl[i].getElementsByTagName("span")[1];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      dl[i].style.display = "";
    } else {
      dl[i].style.display = "none";
    }
  }
}

我对 Javascript 还很陌生，所以如果您推荐其他功能/特性，我可能还没有意识到它，而且我对任何事情都持开放态度，只要它使用钩子而不是类，并且请记住，我仍在学习这一点，所以我试图一步一步来（即我对 Angular 或 Vue 或其他非 React 前端框架一无所知）。

标签： javascriptreactjs

Answer 1

您可以通过这种方式实现，例如：

在调用每次更改状态渲染方法后，在设置 stateHook 过滤器的输入上附加 onChange 处理程序。

表情符号使用过滤器渲染（您必须在此处处理不区分大小写的搜索等），并将它们映射到您的对象。

这是CodeSandbox上的代码

function App() {
  const [filter, setFilter] = useState("");

  return (
    <div>
      <h1>
        <span>emojipedia</span>
      </h1>

      <input
        type="text"
        id="myInput"
        onChange={e => setFilter(e.target.value)}
        placeholder="Search for names.."
      />

      <div id="myDiv">
        <dl className="dictionary">
          {emojipedia
            .filter(emoji => {
              return (
                emoji.name.includes(filter) || emoji.meaning.includes(filter)
              );
            })
            .map(createEntry)}
        </dl>
      </div>
    </div>
  );
}