입력 필드를 사용하여 입력하는 동안 목록을 필터링하는 방법은 무엇입니까?

Question

내가 .I이 좋아한다 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')); 

이것은 본질적으로 당신이 가지고있는 것을 확장하고 있습니다. 네가 가진 모자는 가까웠다. 원하는 경우 changeHandler 내에서 필터를 적용 할 수도 있지만 나중에 다른 필터 또는 기타 등을 추가하려는 경우 가능하면 "나중에"수행하는 것을 선호합니다.

Answer 2

코드도 좋습니다. 코드에서 .map to .filter 메서드를 변경해야하며 모든 것이 작동합니다. 지도 메소드가 필터링하지 않으면 부울을 전달하는 각 요소에 대해 새 값을 반환합니다. 실제로 목록을 필터링하고 싶었습니다.

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