Ant design - 如何在每次选择后自动关闭选择（“标签”或“多个”模式）下拉菜单？

Posted 2023-03-07

【中文标题】Ant design - 如何在每次选择后自动关闭选择（“标签”或“多个”模式）下拉菜单？

【英文标题】：Ant design - How do i auto close select ("tags" or "multiple" mode) dropdown after each selection?

【发布时间】：2019-10-12 08:19:23

【问题描述】：

我在页面中使用 ant.design 选择组件（“标签”或“多个”模式），我希望在每次选择后自动关闭下拉菜单。现在它保持打开状态，我应该单击页面中的其他位置以关闭下拉列表。

import  Select  from 'antd';

const  Option  = Select;

function handleChange(value) 
  console.log(`selected $value`);


ReactDOM.render(
  <Select mode="multiple" placeholder="Select Countries" size="large" onChange=handleChange>
    <Option value="country1">Country1</Option>
    <Option value="country2">Country2</Option>
    <Option value="country3">Country3</Option>
    <Option value="country4">Country4</Option>
    <Option value="country5">Country5</Option>
    <Option value="country6">Country6</Option>
</Select>,
  mountNode,
);

【问题讨论】：

如果你在这里创建一个活生生的例子：codesandbox.io我会尽力帮助你进一步......

【参考方案1】：

只需将第一个“选择”组件更改为：

<Select 
      mode="multiple" 
      placeholder="Select Countries"
      size="large" 
      ref=(select) => this.countrySelect = select
      onChange=()=> 
          this.countrySelect.blur()
      >
    <Option value="country1">Country1</Option>
    <Option value="country2">Country2</Option>
    <Option value="country3">Country3</Option>
    <Option value="country4">Country4</Option>
    <Option value="country5">Country5</Option>
    <Option value="country6">Country6</Option>
</Select>

【参考方案2】：

来自文档：

import  Select  from 'antd';

const Option = Select.Option;

function handleChange( value ) 
  console.log( `selected $value` );


<Select defaultValue="lucy" style=  width: 120   onChange= handleChange >
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>Disabled</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style=  width: 120   disabled>
  <Option value="lucy">Lucy</Option>
</Select>
<Select defaultValue="lucy" style=  width: 120   loading>
    <Option value="lucy">Lucy</Option>
</Select>

使用它自己的<Option>

更多信息：https://ant.design/components/select/

【讨论】：

我正在使用它，在“仅选择”组件中，它工作正常，在每个选择下拉列表关闭后，但在 (mode="tags") 下拉列表中保持打开状态。

@HosseinHajiMali 注意选项大写...注意它正在const Option = Selected.Option 上导入它是一个内置功能的组件...与小写选项不同...

好的，你改了，还是不能按预期工作？ @HosseinHajiMali

是的，我试图让它简短，实际上我所做的与我项目中的 ant.design 示例完全相同，但我仍然有问题。如果您检查多选下拉列表的 ant.design 示例，您也可以看到问题，下拉列表保持打开状态。

想想一个模态框和一个多选下拉菜单，它会打开，您必须在哪里单击才能关闭它？点击空白处关闭它不是用户友好的，它应该在每次选择后自动关闭