与输入字段的下拉菜单

Question

我正在使用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> 

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。

希望有人认为这有用。