Javascript 在React/JS中搜索过滤器

我使用React to

map

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

。我尝试使用的搜索功能如下：

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";
    }
  }
}

function mySearchFunction（）{
var输入、过滤器、div、dl、a、i、txtValue；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDiv”）；
dl=div.getElementsByTagName（“dl”）；
对于（i=0；i-1）{
dl[i].style.display=“”；
}否则{
dl[i].style.display=“无”；
}
}
}

---

我对Javascript相当陌生，所以如果您推荐另外一个函数/特性，我可能还不知道，我对任何东西都持开放态度，只要它使用钩子而不是类，请记住我仍在学习这一点，所以我尝试一步一步地做（也就是说，我对Angular、Vue或其他非React前端框架一无所知）。

您需要对代码进行以下更改才能正常工作

您需要在组件中添加状态并使用useState

我添加了onChange事件处理程序来处理输入更改

重写filter方法以根据name属性筛选数据。可以通过传递要筛选数据的属性使其成为泛型

绑定JSX中的状态变量emojis，以便在更改状态时重新呈现组件

以下是工作解决方案：

请参见下面的代码

function App() {
  const [emojis, setEmojis] = useState(emojipedia);

  function mySearchFunction(event) {
    var tempData = emojipedia.slice();
    tempData = tempData.filter(
      data => data.name.indexOf(event.target.value) > -1
    );
    setEmojis(tempData);
  }

  function createEntry(emojiTerm) {
    return (
      <Entry
        key={emojiTerm.id}
        emoji={emojiTerm.emoji}
        name={emojiTerm.name}
        description={emojiTerm.meaning}
      />
    );
  }

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

      <input
        type="text"
        id="myInput"
        onChange={mySearchFunction}
        placeholder="Search for names.."
      />

      <div id="myDiv">
        <dl className="dictionary">{emojis.map(createEntry)}</dl>
      </div>
    </div>
  );
}

export default App;

函数应用程序（）{
const[emojis，setEmojis]=useState（emojipedia）；
函数mySearchFunction（事件）{
var tempData=emojipedia.slice（）；
tempData=tempData.filter(
data=>data.name.indexOf（event.target.value）>-1
);
setEmojis（tempData）；
}
函数createEntry（emojiTerm）{
返回(
);
}
返回(
表情百科
{emojis.map（createEntry）}
);
}
导出默认应用程序；

您需要对代码进行以下更改才能正常工作

您需要在组件中添加状态并使用useState

我添加了onChange事件处理程序来处理输入更改

重写filter方法以根据name属性筛选数据。可以通过传递要筛选数据的属性使其成为泛型

绑定JSX中的状态变量emojis，以便在更改状态时重新呈现组件

以下是工作解决方案：

请参见下面的代码

function App() {
  const [emojis, setEmojis] = useState(emojipedia);

  function mySearchFunction(event) {
    var tempData = emojipedia.slice();
    tempData = tempData.filter(
      data => data.name.indexOf(event.target.value) > -1
    );
    setEmojis(tempData);
  }

  function createEntry(emojiTerm) {
    return (
      <Entry
        key={emojiTerm.id}
        emoji={emojiTerm.emoji}
        name={emojiTerm.name}
        description={emojiTerm.meaning}
      />
    );
  }

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

      <input
        type="text"
        id="myInput"
        onChange={mySearchFunction}
        placeholder="Search for names.."
      />

      <div id="myDiv">
        <dl className="dictionary">{emojis.map(createEntry)}</dl>
      </div>
    </div>
  );
}

export default App;

函数应用程序（）{
const[emojis，setEmojis]=useState（emojipedia）；
函数mySearchFunction（事件）{
var tempData=emojipedia.slice（）；
tempData=tempData.filter(
data=>data.name.indexOf（event.target.value）>-1
);
setEmojis（tempData）；
}
函数createEntry（emojiTerm）{
返回(
);
}
返回(
表情百科
{emojis.map（createEntry）}
);
}
导出默认应用程序；

您可以通过以下方式实现：

调用每次状态更改后，在设置stateHook筛选器的输入上附加onChange处理程序

emojie使用过滤器呈现（这里必须处理不区分大小写的搜索等），并映射到ur对象

这是你的密码

函数应用程序（）{
const[filter，setFilter]=useState（“”）；
返回(
表情百科
setFilter（e.target.value）}
占位符=“搜索名称…”
/>
{emojipedia
.filter（表情符号=>{
返回(
emoji.name.includes（filter）| | emoji.means.includes（filter）
);
})
.map（createEntry）}
);
}

您可以通过以下方式实现：

调用每次状态更改后，在设置stateHook筛选器的输入上附加onChange处理程序

emojie使用过滤器呈现（这里必须处理不区分大小写的搜索等），并映射到ur对象

这是你的密码

函数应用程序（）{
const[filter，setFilter]=useState（“”）；
返回(
表情百科
setFilter（e.target.value）}
占位符=“搜索名称…”
/>
{emojipedia
.filter（表情符号=>{
返回(
emoji.name.includes（filter）| | emoji.means.includes（filter）
);
})
.map（createEntry）}
);
}

导入React，{useState}来自“React”；
从“/Entry”导入条目；
从“./emojipedia”导入emojipedia；
函数App（）{
const[results，setResults]=useState（[]）
函数mySearchFunction（值）{
const results=emojipedia.filter（emoji=>emoji.name.replace（//g'，）.toLowerCase（）.includes（value.toLowerCase（））
设置结果（结果）
}
返回(
表情百科
mySearchFunction（e.target.value）}
占位符=“搜索名称…”
/>
{
results.length==0？“无结果”：results.map（结果=>{
返回
})
}
);
}
导出默认应用程序；
import React, {useState} from "react";
import Entry from "./Entry";
import emojipedia from "../emojipedia";

function App() {
  const [results, setResults] = useState([])

  function mySearchFunction(value) {
    const results = emojipedia.filter(emoji => emoji.name.replace(/ /g,'').toLowerCase().includes(value.toLowerCase()))
    setResults(results)
  }

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

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

      <div id="myDiv">
        <dl className="dictionary">
        {
          results.length === 0 ? 'no results' : results.map(result => {
            return <Entry key={result.id}
                          emoji={result.emoji}
                          name={result.name}
                          description={result.meaning} />
                        })
          }
          </dl>
      </div>
    </div>
  );
}

export default App;