Ant Select 关闭下拉菜单

IT技术 reactjs drop-down-menu html-select antd
2022-08-02 01:49:46

我在 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 触发并关闭下拉菜单 下拉列表中的选择框

3个回答

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

作为一种解决方案,我可以提供这个自定义组件

在此处输入图像描述

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

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

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

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

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

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