时间戳

首页 > 解决方案 > 在 ReactJS 中实现搜索功能

reactjs - 在 ReactJS 中实现搜索功能

问题描述

我想在我的表中进行搜索。我正在实现以下逻辑：

    this.props.searchFunc.forEach(function(item) {
      if (item.name.toLowerCase().indexOf(document.getElementById("name").value.toLowerCase().trim()) != -1 &&
             ??
      // here i want to map through `test` array and check if the value is present in the array
    })

其中item.name，有一个字符串。在我放置的第二个 id 中??，我有一个数组，带有 nametest和 value ["abc","def","ghi"]。

但我不明白如何映射数组并检查字符串是否存在。我知道数组映射函数：

item.test.map(function(item,id) {
  if(item.toLowerCase().indexOf(document.getElementById("name2").value.toLowerCase().trim()) != -1)
})

但问题是如何同时检查这两个条件，因为只有同时满足两个条件才能进行搜索。

标签： reactjs

解决方案

使用filter和&&。

过滤器将在回调函数中返回所有满足条件的项目。在您的情况下，您只有一个条件。您可以使用“and”运算符添加另一个条件：&&。如果数组中的一个项目同时满足这两个条件，那么它将被包括在内。

item.test.filter(function(item, id) {
    if (
        item.toLowerCase().indexOf(document.getElementById("name").value.toLowerCase().trim()) != -1 
        && //some other condition
       ) {
        return item
       }
   })

编辑

根据您的问题，我假设您searchFunc看起来像这样：

const searchFunc = [
  { name: "ABC", test: ["def", "another value"] },
  { name: "ABC", test: ["ghi", "def"] },
  { name: "Not I List", test: ["also not in list"] },
  { name: "ABC", test: ["Does not meet second condition"] }
];

还有你的test数组：

const test = ["abc", "def", "ghi"];

似乎您想要过滤名称等于document.getElementById("name").value.toLowerCase().trim())返回的任何值且其item.test数组包含来自 的值的项目document.getElementById("name2").value.toLowerCase().trim())。

因此，为了举例，让我们将这些值分别保存在返回值的变量abc中def：

const value1 = document.getElementById("name").value.toLowerCase().trim()) // abc
const value2 = document.getElementById("name2").value.toLowerCase().trim()) // def

现在我们可以过滤同时具有 aitem.name === value1且其item.test数组包含的值value2：

const filteredItems = searchFunc.filter(function(item) {
  if (
    item.name.toLocaleLowerCase() === value1 &&
    item.test.indexOf(value2) !== -1
  ) {
    return true;
  }
});

这是一个片段：

const test = ["abc", "def", "ghi"];

const value1 = document.getElementById("name").value.toLowerCase().trim() // abc
const value2 = document.getElementById("name2").value.toLowerCase().trim() // def


const searchFunc = [
  { name: "ABC", test: ["def", "another value"] },
  { name: "ABC", test: ["ghi", "def"] },
  { name: "Not I List", test: ["also not in list"] },
  { name: "ABC", test: ["Does not meet second condition"] }
];

const filteredItems = searchFunc.filter(function(item) {
  if (
    item.name.toLocaleLowerCase() === value1 &&
    item.test.indexOf(value2) !== -1
  ) {
    return true;
  }
});

console.log(filteredItems);
 <input type="text" id="name" value="abc"> 
 <input type="text" id="name2" value="def">

推荐阅读