web-dev-qa-db-ja.com

入力フィールドで入力しながらリストをフィルタリングする方法は？

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

reactjsreduxreact-routerreact-redux
7
user5711656

あなたはこのようなことをすることができます：

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内でフィルターを適用することもできますが、後で他のフィルターなどを追加する場合に備えて、可能であれば「後で」適用することをお勧めします。

17
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
    })
  }
1
Rahat Khanna