入力欄のドロップダウン

Question

私はアプリケーションにbootstrap要素を追加するのにreact-bootstrapを使用しています。ユーザーがアイテムにタグを付けるために使用できる「ラベル」のリストを持つドロップダウンボタンを追加する必要があります。

私の問題は、「カスタム」ラベルを追加できるように入力フィールドを追加することです。ここでは、（青い四角はチェックボックスです）現在、どのように見えるかです：

最初に私が試した：あなたがinput要素をクリックしたとき

<Dropdown id="myDropdown"> 
    <Dropdown.Toggle bsStyle="warning">Label as...</Dropdown.Toggle> 
    <Dropdown.Menu> 
     <li onSelect={...}> 
      <Checkbox onClick={...} checked={...} inline>Some label</Checkbox> 
     </li> 
     <li onSelect={...}> 
      <Checkbox onClick={...} checked={...} inline>Some other label</Checkbox> 
     </li> 
     <li><input /></li> 
    </Dropdown.Menu> 
</Dropdown> 

をしかし、これはdropdownを閉じます。

私は、公式のドキュメント（「Custom Dropdown Components」と検索コードを検索）に表示されている例にわずかなバリエーションを実装しようとしました。これにより、inputをクリックして入力することができますが、要素の外側をクリックするとドロップダウンが終了しません。

---

TL; DR

は、どのように私は私はあなたがメニューの外側をクリックしたときにも閉じinputフィールドをクリックすることを可能にするドロップダウンを達成することができますか？

EDIT：

は私の第2の実施のために生成されたHTMLの追加：

<div class="dropdown btn-group"> 
    <button type="button" class="dropdown-toggle btn btn-warning"><i class="fa fa-check" aria-hidden="true"></i><!-- react-text: 153 --> <!-- /react-text --><!-- react-text: 154 -->Label as...<!-- /react-text --><!-- react-text: 155 --> <!-- /react-text --><span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li><label class="checkbox-inline"><input type="checkbox" value="on"><span></span><!-- react-text: 162 --> Some label<!-- /react-text --></label></li> 
    <li><label class="checkbox-inline"><input type="checkbox" value="on"><span></span><!-- react-text: 167 --> Some other label<!-- /react-text --></label></li> 
    <li><label class="checkbox-inline"><input type="checkbox" value="on"><span></span><input type="text" value="" style="height: 17px;font-size: .9em;"></label></li> 
    <li role="separator" class="divider"></li> 
    <li role="presentation" class=""><a role="menuitem" tabindex="-1" href="#">Clear labels</a></li> 
    </ul> 
</div> 

Answer 1

をだから私は数日前に答えを見つけて、私は誰かが、この時につまずく場合にはそれをここに投稿します将来の投稿

react-overlaysをインストールし、ReactRootWrapperをインポートする必要があります。 （hereを発見した）サンプルコードの変更、部品が今のようなものになります。

<RootCloseWrapper onRootClose={this.setOpenStateToFalse}> 
    <Dropdown id="dropdown-custom-menu" open={this.state.open} onToggle={this.toggleOpenState}> 
    <CustomToggle bsRole="toggle">Custom toggle</CustomToggle> 
    <CustomMenu bsRole="menu"> 
     <MenuItem eventKey="1">Red</MenuItem> 
     <MenuItem eventKey="2">Blue</MenuItem> 
     <MenuItem eventKey="3" active>Orange</MenuItem> 
     <MenuItem eventKey="1">Red-Orange</MenuItem> 
    </CustomMenu> 
    </Dropdown> 
</RootCloseWrapper> 

を私は例の機能を追加していないが、彼らの名前は、彼らが何をすべきかを説明します。基本的にはsetOpenStateToFalse()はthis.state.open〜falseに設定する必要があり、toggleOpenState()は現在のブール値this.state.openを反転する必要があります。

誰かがこれを見つけることを希望します。