如何在输入字段中输入时过滤列表？

Question

我正在尝试在输入字段中过滤我的字段，如 autocomplete 中那样。我喜欢这个，但它不会过滤我的列表

这是我的代码

 onChangeHandler(e){
    console.log(e.target.value);
    var newArray = this.state.users.map((d)=>{
      return d.indexOf(e.target.value) !== -1 
    });
    console.log(newArray)
    this.setState({
      users:newArray
    })
  }

http://codepen.io/anon/pen/zNYGzb?editors=1010

Answer 1

你可以这样做：

class First extends React.Component {
  constructor(){
    super();
    this.state ={
      users: ['abc',"pdsa","eccs","koi"],
      input: '',
    }
  }

  onChangeHandler(e){
    this.setState({
      input: e.target.value,
    })
  }

  render (){
      const list = this.state.users
        .filter(d => this.state.input === '' || d.includes(this.state.input))
        .map((d, index) => <li key={index}>{d}</li>);

    return (<div>
      <input value={this.state.input} type="text" onChange={this.onChangeHandler.bind(this)}/>
        <ul>{list}</ul>
      </div>)
  }
}

ReactDOM.render(<First/>,document.getElementById('root'));

这实质上是在扩展您所拥有的，并且您所拥有的已经很接近了。如果你愿意，你也可以选择在 changeHandler 中应用过滤器，但如果可能的话，我更愿意这样做 "later"，以防你以后想添加其他过滤器或诸如此类的东西。

Answer 2

您的代码也很好，您只需将代码中的 .map 方法更改为 .filter 方法即可，一切正常。 Map 方法不会过滤它，只是 returns 每个元素的新值，您传递的是布尔值。而您实际上想要过滤列表。

onChangeHandler(e){
    console.log(e.target.value);
    var newArray = this.state.users.filter((d)=>{
      return d.indexOf(e.target.value) !== -1 
    });
    console.log(newArray)
    this.setState({
      users:newArray
    })
  }

如何在输入字段中输入时过滤列表？

how to filter list while typing with input field?

reactjs

react-router

redux

react-redux