如何制作Bootstrap下拉列表不会隐藏点击下拉列表中显示的反应组件？

Question

我有一个反应组件（比如'x'）包含在React-Bootstrap的OverlayTrigger（点击触发并显示在底部）（例如React Bootstrap overlay =＆gt;搜索OverlayTrigger）。我正在使用Bootstrap Dropdown来显示'x'反应组件。 （例如Bootstrap dropdown）

正如预期的那样，叠加层必须在单击x组件时出现，但bootstrap下拉列表会同时关闭。由于叠加层出现在窗口的左上方位置并且下拉隐藏。

是否有任何方法可以使叠加点击不影响下拉隐藏，但如果用户点击下拉列表外的任何位置，它应该关闭？

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

Answer 1

我发现在单击下拉按钮时，下拉div（id = dropDownOpen）上会添加open class。因此，当点击li项目（即我的反应组件）时，我使用了将div添加到div的hack。

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

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