Select 选择器

类似 Select2 的选择器。

何时使用#

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

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

API#

Select props#

参数	说明	类型	默认值
value	指定当前选中的条目	string/Array	无
defaultValue	指定默认选中的条目	string/Array	无
multiple	支持多选	boolean	false
allowClear	支持清除, 单选模式有效	boolean	false
filterOption	是否根据输入项进行筛选，可为一个函数，返回满足要求的 option 即可	boolean or function(inputValue, option)	true
tags	可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配	boolean	false
onSelect	被选中时调用，参数为选中项的 value 值	function(value, option)	无
onDeselect	取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效	function(value)	无
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 属性，如设置为 children 表示对内嵌内容进行搜索	string	value
combobox	输入框自动提示模式	boolean	false
size	选择框大小，可选 `large` `small`	String	default
showSearch	在下拉中显示搜索框	boolean	false
disabled	是否禁用	boolean	false
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body

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;

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

ReactDOM.render(
  <Select showSearch
    style={{ width: 200 }}
    placeholder="请选择人员"
    optionFilterProp="children"
    notFoundContent="无法找到"
    searchPlaceholder="输入关键词"
    onChange={handleChange}>
    <Option value="jack">杰克</Option>
    <Option value="lucy">露西</Option>
    <Option value="tom">汤姆</Option>
  </Select>
, 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);

分组

用 OptGroup 进行选项分组。

import { Input, Select, Button, Icon } from 'antd';
import jsonp from 'jsonp';
import querystring from 'querystring';
import classNames from 'classnames';
const Option = Select.Option;

let timeout;
let currentValue;

function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  function fake() {
    const str = querystring.encode({
      code: 'utf-8',
      q: value,
    });
    jsonp(`http://suggest.taobao.com/sug?${str}`, (err, d) => {
      if (currentValue === value) {
        const result = d.result;
        const data = [];
        result.forEach((r) => {
          data.push({
            value: r[0],
            text: r[0],
          });
        });
        callback(data);
      }
    });
  }

  timeout = setTimeout(fake, 300);
}

const SearchInput = React.createClass({
  getInitialState() {
    return {
      data: [],
      value: '',
      focus: false,
    };
  },
  handleChange(value) {
    this.setState({ value });
    fetch(value, (data) => this.setState({ data }));
  },
  handleSubmit() {
    console.log('输入框内容是: ', this.state.value);
  },
  handleFocusBlur(e) {
    this.setState({
      focus: e.target === document.activeElement,
    });
  },
  render() {
    const btnCls = classNames({
      'ant-search-btn': true,
      'ant-search-btn-noempty': !!this.state.value.trim(),
    });
    const searchCls = classNames({
      'ant-search-input': true,
      'ant-search-input-focus': this.state.focus,
    });
    const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
    return (
      <Input.Group className={searchCls} style={this.props.style}>
        <Select
          combobox
          value={this.state.value}
          searchPlaceholder={this.props.placeholder}
          notFoundContent=""
          defaultActiveFirstOption={false}
          showArrow={false}
          filterOption={false}
          onChange={this.handleChange}
          onFocus={this.handleFocusBlur}
          onBlur={this.handleFocusBlur}>
          {options}
        </Select>
        <div className="ant-input-group-wrap">
          <Button className={btnCls} onClick={this.handleSubmit}>
            <Icon type="search" />
          </Button>
        </div>
      </Input.Group>
    );
  },
});

ReactDOM.render(
  <SearchInput placeholder="input search text" style={{ width: 200 }} />
, mountNode);

搜索框

带有搜索按钮的自动补全输入框。

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((domain) => {
        const email = `${value}@${domain}`;
        return <Option key={email}>{email}</Option>;
      });
    }
    this.setState({ options });
  },
  render() {
    // filterOption 需要设置为 false，数据是动态设置的
    return (
      <Select combobox
        style={{ width: 200 }}
        onChange={this.handleChange}
        filterOption={false}
        placeholder="请输入账户名">
        {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(province => <Option key={province}>{province}</Option>);
    const cityOptions = this.state.cities.map(city => <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);

联动

省市联动是典型的例子。

推荐使用 cascader 组件。