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

Question

我有一个 React 组件（比如“x”），它包含在 React-Bootstrap 的 OverlayTrigger 中（点击时触发并显示在底部）（例如 React Bootstrap overlay => 搜索 OverlayTrigger ）。我正在使用 Bootstrap Dropdown 来显示“x”反应组件。 （例如Bootstrap dropdown）

正如预期的那样，覆盖必须在单击 x 组件时出现，但引导下拉菜单同时关闭。因此，覆盖出现在窗口的左上角位置并隐藏了下拉菜单。

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

任何帮助将不胜感激。提前致谢。

Answer 1

我发现单击下拉按钮时，在下拉 div (id=dropDownOpen) 上添加了开放类。因此，当点击 li 项目（即我的反应组件）时，我使用了向 div 添加类 open 的技巧。

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

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