Ant Select 关闭下拉菜单答案

【问题标题】：Ant Select closes dropdownAnt Select 关闭下拉菜单
【发布时间】：2018-08-30 11:46:57
【问题描述】：

我在 Dropdown 组件中使用 Ant Select 组件。这是我的索引文件，它呈现 Dropdown

const getMenu = filter => (
  <MenuContainer
    ...
  />
);

<Dropdown
  overlay={getMenu(searchFilter)}
  trigger={['click']}
  visible={this.state.search}
  onVisibleChange={val =>
    this.handleDropdownVisibility(val, searchFilter)
  }
>
  ...
</Dropdown>

这是我的 MenuContainer，它在其中返回 Select Component

handleSelectChange = val => {
  this.setState({
    selectedValue: val,
  });
};

<Select
   ref="selectBox"
   onChange={this.handleSelectChange}
   style={{ width: '100%' }}
>
  {numberComparision.map((item, i) => {
    return (
     <Option key={i} value={item.id}>
      {item.name}
     </Option>
    );
  })}
</select>

点击选择值 onVisibleChange 触发并关闭下拉菜单

【问题讨论】：

这不是一个工作示例。请提供一个 jsfiddle/codepen/我们可以调试的东西。
相关 - Github Ant issue thread

标签： reactjs drop-down-menu html-select antd

【解决方案1】：

在当前的 v3.3.1 中，没有 API 可以防止关闭 Dropdown 列表。

作为解决方案，我可以提供 this custom component。

Item 有一个属性clickable，表示单击后是否关闭下拉列表。您可以设置不应触发关闭下拉列表的元素的true/false 或 css 名称。

【讨论】：

【解决方案2】：

将包含选择的 Menu.Item 更改为 Menu.ItemGroup，单击时不会触发 onVisibleChange。

【讨论】：

【解决方案3】：

我相信，您正在混合不应该在这里混合的成分。

Dropdown 期望它的覆盖是某种菜单。或者至少是静态的，不会打开另一个动态<div> 层。

Select 已经有一个下拉类型的行为。因此，您的 Dropdown 打开 Select 打开 Select 下拉列表，然后它们都对单击事件做出反应并关闭。

目前尚不清楚您的问题和屏幕截图中您实际想要实现的目标，而仅使用 Select 无法实现。你可以试着澄清一下。

【讨论】：