與輸入字段的下拉菜單

我正在使用react-bootstrap將bootstrap元素添加到我的應用程序中。我需要添加一個包含「標籤」列表的下拉按鈕，用戶可以使用該列表標記其項目。與輸入字段的下拉菜單

我的問題是添加一個輸入字段，以便他們可以添加一個「自定義」標籤。下面是它的外觀目前（藍色方塊是複選框）：

首先我想：

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

然而，這樣當您單擊input元素關閉dropdown。

因此，我試圖對官方文檔中顯示的示例（搜索「Custom Dropdown Components」和查看代碼）執行一個輕微的變化。這使我可以點擊並鍵入input，但現在當我點擊元素外部時下拉不會關閉。

TL; DR

我如何能實現下拉，讓我點擊一個input場當您單擊菜單之外也關閉？

編輯：

添加生成的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>

來源

2016-11-28 Chris

你能粘貼什麼編譯的HTML結果是？ –

@JoshuaTerrill，肯定的事情。對於我試過的兩個實現中的哪一個？ – Chris

第二個，你可以點擊它並鍵入輸入，但下拉不會關閉。 –

所以我找到了答案前幾天，我將它張貼在這裏，以防有人絆倒在此在未來發布。您需要安裝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。

希望有人認爲這有用。

來源

2016-12-19 15:11:40 Chris

與輸入字段的下拉菜單

回答

相關問題