Reactjs 如何使用搜索字段筛选数据

我有一个搜索字段输入，通过该输入我需要过滤数据。 那么，如何使用搜索字段筛选数据。。 有人能帮我吗

class App extends Component {
 constructor() {
   super ();
   this.state = {
     monsters : [],
     searchFeild :'',
   };
 }

componentDidMount() {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
   .then(users => this.setState({monsters : users}))
}

inputData =(event)=>{
  console.log(event.target.value);
this.setState({searchFeild : event.target.value});

}

  render() {

  return (
    <div className="App">
      <input type ="text" placeholder ="Typeo" onChange={this.inputData}/>
      <CardList  monsters ={this.state.monsters}/>
    </div>
  );
}
}

export default App;

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
怪物：[]，
searchFeild:“，
};
}
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
.then（response=>response.json（））
.then（users=>this.setState（{monsters:users}））
}
inputData=（事件）=>{
日志（event.target.value）；
this.setState（{searchFeild:event.target.value}）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

对怪物使用过滤功能

      monsters.filter(m => !searchfield || m.name.contains(searchfield))

此外，您的输入缺少值。查看此处了解更多信息

---

搜索的复杂性完全取决于您和您的怪物数据集的外观。假设你的怪物阵列看起来像这样：

monsters = [{name: "Pikachu"}, {name: "Meowth"}, {name: "Charmander"}]

您可以进行一次非常简单的搜索，以检查您在输入中输入的

字符串是否包含在怪物的
名称中。这就像使用
array.prototype.filter（）
和
string.prototype.includes（）
或
string.prototype.contains（）一样简单

将更改处理程序增强为：

inputData = (event) => {
   const { value } = event.target
   const { monsters } = this.state

   const filteredMonsters = monsters.filter((monster) => {
      return monster.name.includes(value)
   })

   this.setState({
      monsters: filteredMonsters
   })
}

但同样，这是一个非常原始的搜索，您可以通过考虑字母大小写、空格、正则表达式等来增强它