Question

我有一个搜索字段输入，我需要通过该输入过滤数据。因此，如何使用搜索字段过滤数据。有人可以帮我吗。.

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;

Answer 1

对怪物使用过滤功能

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

您的输入也缺少值。在这里查看更多信息 https://reactjs.org/docs/forms.html#controlled-components

Answer 2

搜索的复杂程度完全取决于您以及怪物数据集的外观。假设您的怪物数组看起来像这样：

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

您可以做一个非常简单的搜索来检查输入的string是否包含在怪物的name中。就像使用array.protoype.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
   })
}

但是，这又是一个非常原始的搜索，您可以通过考虑字母框，空格，正则表达式等来增强它。

如何使用搜索字段过滤数据

2 个答案: