Reactjs 如何在使用输入字段键入时筛选列表？

我正在尝试过滤我的字段，同时在

自动完成中绑定输入字段。我喜欢这样，但它不会过滤我的列表

这是我的密码

 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
    })
  }

您可以这样做：

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'));

类首先扩展React.Component{
构造函数（）{
超级（）；
这个州={
用户：[“abc”、“pdsa”、“eccs”、“koi”]，
输入：“”，
}
}
onChangeHandler（e）{
这是我的国家({
输入：e.target.value，
})
}
渲染（）{
const list=this.state.users
.filter（d=>this.state.input==''| | d.includes（this.state.input））
.map（（d，index）=>{d}）；
返回(
{list}
)
}
}
ReactDOM.render（，document.getElementById（'root'））；

这实质上是对你所拥有的东西的扩展，而你所拥有的已经很接近了。如果需要，您也可以选择在changeHandler中应用筛选器，但如果可能的话，我更愿意“以后”这样做，以防您以后添加其他筛选器或诸如此类的内容。
您的代码也很好，您只需将.map更改为.filter方法，一切都会正常工作。Map方法不进行过滤，它只为每个元素返回一个新值，您要传递一个布尔值。而实际上，您希望筛选列表


onChangeHandler（e）{
console.log（如target.value）；
var newArray=this.state.users.filter（（d）=>{
返回d.indexOf（e.target.value）！=-1
});
console.log（newArray）
这是我的国家({
用户：newArray
})
}
可以帮助您：@trananhien我认为这是一种完全不同的方法是吗？这会不会对每个渲染进行不必要的过滤和映射，这可能会影响性能？如果我尝试运行应用程序，我会收到以下错误：“d.includes不是一个函数”。@BrunoMazza您使用ES6吗？我很确定这是晚些时候的事addition@KailashVele也许吧，但我对此表示怀疑。如果你发现它在某种程度上是，那么引入一个去盎司函数