reactjs - Ant 设计 - 如何在每次选择后自动关闭选择 ("tags"或 "multiple"模式)下拉列表？

Question

我在页面中使用 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,
);

Answer 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>