Ant Select关闭下拉列表

Question

我在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会触发并关闭下拉列表

Answer 1

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

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

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

Answer 2

我相信你混合的组件不是混合的。

Dropdown预计其叠加层会成为某种菜单。或者至少是一些不会打开另一个动态<div>图层的静态图片。

选择已有下拉列表类型行为。因此，您的Dropdown会打开Select，打开Select下拉列表，然后它们都会对click事件作出反应并关闭。

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

Answer 3

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