Javascript 带输入字段的下拉列表

我正在使用

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>

---

所以我几天前找到了答案，我会把它贴在这里，以防将来有人无意中发现这篇文章

您需要安装

react overlays

并导入

ReactRootWrapper

。修改示例代码（来自文档中的），组件现在应该看起来像：

<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的当前布尔值

希望有人觉得这很有用。
你能把编译好的HTML粘贴进去吗？@JoshuaTerrill，当然可以。我试过两个实现中的哪一个？第二个，你可以点击它并输入输入，但下拉菜单不关闭。@Joshuterrill，是的，刚刚添加了它。：）我对引导的常规版本（不是react版本）进行了修改，一旦我添加了
数据切换
属性，它就工作了。我不确定反应版本。如果您可以在小提琴上运行某种工作代码段或运行react的plunkr，我可以尝试提供更多帮助。我看不到菜单中的输入。RootCloseWrapper似乎已从react覆盖中消失
<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>