我试图像在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
})
}
您可以执行以下操作：
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内应用过滤器，但如果可能以后要添加其他过滤器，我宁愿“以后”使用它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句