如何使用輸入字段進行打字時過濾列表？

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

這實質上是擴大你所擁有的，和w你戴的帽子很近。如果你願意，你也可以選擇在changeHandler中應用過濾器，但是如果可能的話，我更願意「稍後」這樣做，以防你稍後要添加其他過濾器或者其他東西。

Answer 2

你的代碼也很好，你只是需要在您的代碼中更改.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 
 
    }) 
 
    }