Дизайн муравья - Как мне автоматически закрывать выпадающий список («теги» или «несколько режимов») после каждого выбора? - PullRequest
Новая
       8

Дизайн муравья - Как мне автоматически закрывать выпадающий список («теги» или «несколько режимов») после каждого выбора?

0 голосов
/ 26 мая 2019

Я использую компонент выбора 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,
);

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Просто измените первый компонент «Выбрать» на этот: 

<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>
0 голосов
/ 26 мая 2019

Из документов: 

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/

...