Select 选择器

类似 Select2 的选择器。

何时使用#

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

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

API#

Select props#

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

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(<div>
  <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>
</div>, mountNode);
基本使用

基本使用。

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 tags
   style={{width: '100%'}}
   searchPlaceholder="标签模式"
    onChange={handleChange}>
    {children}
  </Select>
, mountNode);
标签

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>
, mountNode);
分组

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>
, mountNode);
.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>
, mountNode);
多选

多选，从已有条目中选择（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 />, mountNode);
智能提示

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

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: 90}} onChange={this.handleProvinceChange}>
        {provinceOptions}
      </Select>
      <Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
        {cityOptions}
      </Select>
    </div>;
  }
});
ReactDOM.render(<App />, mountNode);
联动

省市联动是典型的例子。