Select 选择器

类似 Select2 的选择器。

何时使用#

弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。

<Select>
  <Option value="lucy">lucy</Option>
</Select>

API#

Select props#

参数 说明 类型 默认值
value 指定当前选中的条目 string/Array 无
defaultValue 指定默认选中的条目 string/Array 无
multiple 支持多选 false
filterOption 是否根据输入项进行筛选 true
tags 可以把随意输入的条目作为tag，输入项不需要与下拉选项匹配 false
onSelect 被选中时调用，参数为选中的option value值 function(value, option) 无
onDeselect 取消选中时调用，参数为选中的option value值，仅在multiple或tags模式下生效 function(value, option) 无
onChange 选中option，或input的value变化(combobox模式下)时，调用此函数 function(value, label) 无
allowClear 显示清除按钮 false
onSearch 文本框值变化时回调 function(value: String)
placeholder 选择框默认文字 string 无
searchPlaceholder 搜索框默认文字 string 无
optionFilterProp 输入项过滤对应的 option 属性 string value
combobox 输入框自动提示模式 false
size 选择框大小，可选 large small String default

Option props#

参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key 如果react需要你设置此项，此项值与value的值相同，然后可以省略value设置 String
value 默认根据此属性值进行筛选 String -

OptGroup props#

参数 说明 类型 默认值
label 组名 String/React.Element 无
key String -

代码演示 

import { Select } from 'antd';
const Option = Select.Option;

function handleChange(value) {
  console.log('selected ' + value);
}

ReactDOM.render(
  <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>
, document.getElementById('components-select-demo-basic'));
基本使用

基本使用。

import { Select } from 'antd';
const Option = Select.Option;

let children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log('selected ' + value);
}

ReactDOM.render(
  <Select
   style={{width: '100%'}}
   searchPlaceholder="标签模式"
  tags onChange={handleChange}>
    {children}
  </Select>
, document.getElementById('components-select-demo-tags'));
标签

tags select，随意输入的内容（scroll the menu）

import { Select } from 'antd';
const Option = Select.Option;
const OptGroup = Select.OptGroup;

function handleChange(value) {
  console.log('selected ' + value);
}

ReactDOM.render(
  <Select defaultValue="lucy"
    style={{width:200}}
    showSearch={false}
    onChange={handleChange}>
    <OptGroup label="Manager">
      <Option value="jack">jack</Option>
      <Option value="lucy">lucy</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="yiminghe">yiminghe</Option>
    </OptGroup>
  </Select>
, document.getElementById('components-select-demo-optgroup'));
分组

option分组

import { Select } from 'antd';
const Option = Select.Option;

function handleChange(value) {
  console.log('selected ' + value);
}

ReactDOM.render(
  <div>
  <Select size="large" defaultValue="lucy" style={{width:200}} 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:200}} 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 size="small" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>Disabled</Option>
      <Option value="yiminghe">yiminghe</Option>
    </Select>
  </div>
, document.getElementById('components-select-demo-size'));
.code-box-demo .ant-select {
  margin: 0 8px 10px 0;
}
三种大小

三种大小的选择框，当 size 分别为 large 和 small 时，输入框高度为 32px 和 22px ，默认高度为 28px

import { Select } from 'antd';
const Option = Select.Option;

let children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log('selected ' + value);
}

ReactDOM.render(
  <Select multiple
  style={{width:400}}
  defaultValue={['a10', 'c12']} onChange={handleChange}>
    {children}
  </Select>
, document.getElementById('components-select-demo-multiple'));
多选

多选，从已有条目中选择（scroll the menu）

import { Select } from 'antd';
const Option = Select.Option;

const Test = React.createClass({
  getInitialState() {
    return {
      options: []
    };
  },
  handleChange(value) {
    let options;
    if (!value || value.indexOf('@') >= 0) {
      options = [];
    } else {
      options = ['gmail.com', '163.com', 'qq.com'].map(function(domain) {
        const email = value + '@' + domain;
        return <Option key={email}>{email}</Option>;
      });
    }
    this.setState({
      options: options
    });
  },
  render() {
    // filterOption 需要设置为 false，数据是动态设置的
    return <Select combobox
      style={{width:200}}
      onChange={this.handleChange}
      filterOption={false}
      searchPlaceholder="请输入账户名">
      {this.state.options}
    </Select>;
  }
});

ReactDOM.render(<Test />, document.getElementById('components-select-demo-combobox'));
智能提示

输入框自动完成功能，下面是一个账号注册表单的例子。

import { Select } from 'antd';
const Option = Select.Option;

const provinceData = ['浙江', '江苏'];
const cityData = {
  '浙江': ['杭州', '宁波', '温州'],
  '江苏': ['南京', '苏州', '镇江']
};


const App = React.createClass({
  getInitialState() {
    return {
      cities: cityData[provinceData[0]],
      secondCity:cityData[provinceData[0]][0]
    };
  },
  handleProvinceChange(value) {
    this.setState({
      cities: cityData[value],
      secondCity:cityData[value][0]
    });
  },
  onSecondCityChange(value) {
    this.setState({
      secondCity: value
    });
  },
  render() {
    const provinceOptions = provinceData.map(function(province) {
      return <Option key={province}>{province}</Option>;
    });
    const cityOptions = this.state.cities.map(function(city) {
      return <Option key={city}>{city}</Option>;
    });
    return <div>
      <Select defaultValue={provinceData[0]} style={{width:150}} onChange={this.handleProvinceChange}>
        {provinceOptions}
      </Select>
      <Select value={this.state.secondCity} style={{width:150}} onChange={this.onSecondCityChange}>
        {cityOptions}
      </Select>
    </div>;
  }
});
ReactDOM.render(<App />, document.getElementById('components-select-demo-coordinate'));
联动

省市联动是典型的例子。