蚂蚁选择关闭下拉菜单 [英] Ant Select closes dropdown

问题描述

我在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，它在其中返回选择组件

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上的选择值会触发并关闭下拉菜单

解决方案

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

作为解决方案，我可以提供 此自定义组件 .

Item具有属性clickable，该属性指示是否单击后将关闭下拉列表.您可以设置不应触发关闭下拉列表的元素的true/false或CSS名称.

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>

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>

so on clicking select value onVisibleChange fires and closes dropdown

解决方案

In current v3.3.1 there is no API to prevent to close the Dropdown list.

As a solution I can offer this custom component.

Item has a property clickable which indicates will be the droplist closed after click or not. You can set true/false or css name of an element which should not trigger closing drop-list.

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