reactjs – 如何在输入字段输入时过滤列表?
发布时间:2020-12-15 05:06:12 所属栏目:百科 来源:网络整理
导读:我正在尝试过滤我的字段,同时在自动完成中绑定输入字段.我喜欢这样,但它不会过滤我的列表 这是我的代码 onChangeHandler(e){ console.log(e.target.value); var newArray = this.state.users.map((d)={ return d.indexOf(e.target.value) !== -1 }); console
我正在尝试过滤我的字段,同时在自动完成中绑定输入字段.我喜欢这样,但它不会过滤我的列表
这是我的代码 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
你可以这样做:
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中应用过滤器,但如果可能的话,我更愿意“稍后”进行,以防您以后添加其他过滤器或诸如此类的东西. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |