如何使 Bootstrap 下拉列表不隐藏在单击下拉列表中显示的反应组件时？

Question

我有一个 React 组件（比如 'x'）包裹在 React-Bootstrap（示例 React Bootstrap overlay => Search for OverlayTrigger ). I'm using Bootstrap Dropdown to display 'x' React Components. ( example Bootstrap dropdown）的 OverlayTrigger（点击时触发并出现在底部）

正如预期的那样，叠加层必须在单击 x 组件时出现，但 bootstrap 下拉菜单同时关闭。因此，叠加层出现在 window 的左上角位置，下拉菜单隐藏。

有什么方法可以使覆盖点击不影响下拉菜单隐藏，但如果用户点击下拉菜单以外的任何地方，它应该关闭吗？

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我发现当点击下拉按钮时，open class 被添加到下拉菜单 div (id=dropDownOpen) 中。因此，当点击 li 项目（即我的反应组件）时，我使用了将 class open 添加到 div 的技巧。

这是我点击任何 li 项目时触发的 onClick 函数：

const keepDropDownOpen = () => {
  window.$('#dropDownOpen').addClass('open');
}