如何使用输入字段进行打字时过滤列表？

问题描述：

我想我过滤领域，而在输入字段绑在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

可以帮助您： http://stackoverflow.com/questions/15461250/how-to-check-if-data-already-exists-before-inserting-on-a -table-html5-javascr/41376856＃41376856 –

@TranAnhHien我认为这是一个完全不同的方法是啊？ – Chris

答

你可以所以这样的事情：

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

这实质上是扩大你所拥有的，和w你戴的帽子很近。如果你愿意，你也可以选择在changeHandler中应用过滤器，但是如果可能的话，我更愿意“稍后”这样做，以防你稍后要添加其他过滤器或者其他东西。

包括???不遵循该 –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes – Chris

答

你的代码也很好，你只是需要在您的代码中更改.map至.filter方法，并且所有内容都将工作。 Map方法不会对它进行过滤，只是为每个传递布尔值的元素返回一个新值。而你真的想要过滤列表。

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

如何使用输入字段进行打字时过滤列表？

相关推荐