2017-09-12 6 views
0

私はreact-bootstrap-typeaheadのコントロールを使用しようとしていますが、私が望むようにしようとしています。私は実際に私のページにこれらのうちの2つを持っています。そのうちの1つは真の非同期ルックアップを行い、もう1つはコンボボックスのように動作したいものです。react-bootstrap-typeaheadのコンボボックスの動作を実現

私ができることをしたいのは、アイテムを選択し、ドロップダウンをクリックして自分の考えを変え、別のアイテムを選択することです。しかし、これを試してみると、リストを再度展開すると、選択した項目だけに自動的にフィルタリングされます。例えば

私はdemo page上の基本的な例を使用している場合、およびAlabamaを選択し、今入力をクリックするだけアラバマや他の選択肢のどれもが表示されます。私はこれが理想的には私を完全なリストに戻すようにしたいと思います(これは可能でしょうか?)。

enter image description here

答えて

1

はい、それは可能です。 filterBy小道具は、あなたが望む結果をフィルタリングすることを可能にするカスタム機能をとることができます。リンク先の例を構築するために、次の行に沿って何かをしたいと考えています:

<Typeahead 
    filterBy={(option, text) => { 
    if (this.state.selected.length) { 
     // Display all the options if there's a selection. 
     return true; 
    } 
    // Otherwise filter on some criteria. 
    return option.name.toLowerCase().indexOf(text.toLowerCase()) !== -1; 
    }} 
    labelKey="name" 
    onChange={(selected) => this.setState({selected})} 
    options={options} 
    placeholder="Choose a state..." 
    selected={this.state.selected} 
/>