我之前在项目里也碰到过一模一样的问题，核心原因就是事件冒泡：当你点击内部Select组件触发它的下拉时，点击事件会顺着DOM树冒泡到外层的Dropdown容器，触发Dropdown的onVisibleChange回调，导致Dropdown被关闭，连带Select的下拉菜单也跟着消失了。下面给你几个经过验证的解决方案：

方案一：阻止Select组件的事件冒泡（最常用） #

在MenuContainer里的Select组件上添加onMouseDown事件，阻止事件向上冒泡。因为浏览器的事件触发顺序是mousedown → mouseup → click，Dropdown的关闭逻辑绑定在click事件上，我们在更早的mousedown阶段阻止冒泡，就能让外层Dropdown接收不到这个点击事件，自然不会触发关闭。

修改MenuContainer里的Select代码：

<Select
  value={this.state.selectedValue}
  onChange={this.handleSelectChange}
  onMouseDown={(e) => e.stopPropagation()} // 关键代码
  // 其他属性...
/>

方案二：精细化控制Dropdown的关闭逻辑 #

如果方案一不能满足你的需求（比如有复杂的交互场景），可以在Dropdown的onVisibleChange回调里做判断，只有当点击的是Dropdown触发元素或者外部区域时，才允许关闭Dropdown。

修改你的handleDropdownVisibility函数：

handleDropdownVisibility = (val, searchFilter) => {
  // 当要关闭Dropdown时，检查当前活跃元素是否属于内部的Select组件
  if (!val) {
    const activeElement = document.activeElement;
    // 通过类名判断是否是Ant Select的元素
    if (activeElement && activeElement.closest('.ant-select')) {
      // 如果是，直接返回，不执行关闭逻辑
      return;
    }
  }
  // 正常执行原有逻辑
  this.setState({ search: val });
  // 你的其他业务代码...
};

方案三：调整Dropdown弹出层的挂载容器（可选） #

有时候Dropdown和Select的弹出层挂载层级冲突也会导致这个问题，我们可以把Dropdown的弹出层挂载到document.body上，让它和Select的弹出层处于同级，避免父容器的事件监听影响子组件。

修改Dropdown组件的代码：

<Dropdown
  overlay={getMenu(searchFilter)}
  trigger={['click']}
  visible={this.state.search}
  onVisibleChange={val => this.handleDropdownVisibility(val, searchFilter)}
  getPopupContainer={() => document.body} // 关键代码
>
  {/* 你的触发元素 */}
</Dropdown>

一般来说方案一就能解决绝大多数情况，建议先尝试这个方法，如果还有特殊场景再考虑后面的方案。

内容的提问来源于stack exchange，提问作者atif