как фильтровать список при вводе текста с полем ввода?

Question

Я пытаюсь фильтровать мое поле связывая в поле ввода, как в autocomplete .I сделать так, но это не фильтрует мой список

вот мой код

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 метод в вашем коде и все будет работать. Метод карты не фильтрует, он просто возвращает новое значение для каждого элемента, с которым вы проходили логическое. Если вы действительно хотите отфильтровать список.

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