Ant Select 关闭下拉菜单 [英] Ant Select closes dropdown

问题描述

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

I am using Ant Select component inside Dropdown component. Here is my index file which renders 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

Here is my MenuContainer which return Select Component inside it

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

so on clicking select value onVisibleChange fires and closes dropdown

推荐答案

Change Menu.Item 其中选择包含到 Menu.ItemGroup 中，单击时不会触发 onVisibleChange.

Change Menu.Item where the select is contained to a Menu.ItemGroup, those do not trigger the onVisibleChange when clicked.

这篇关于Ant Select 关闭下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！