Select 选择器

下拉选择器。

何时使用

• 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
• 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

代码演示

基本使用

基本使用。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const Option = Select.Option;
​
function handleChange(value) {
  console.log(`selected ${value}`);
}
​
ReactDOM.render(
  <div>
    <Select
      label="Select"
      placeholder="Please Select"
      allowClear
      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 }} allowClear disabled>
      <Option value="lucy">Lucy</Option>
    </Select>
  </div>,

带搜索框

展开后可对选项进行搜索。

import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const Option = Select.Option;
​
ReactDOM.render(
  <Select
    style={{ width: 300 }}
    placeholder="Select a person"
    optionFilterProp="children"
    filterOption={(input, option) =>
      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
    filter
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
    <Option value="jack1">Jack1</Option>
    <Option value="lucy1">Lucy1</Option>
    <Option value="tom1">Tom1</Option>
    <Option value="jack2">Jack2</Option>
    <Option value="lucy2">Lucy2</Option>
    <Option value="tom2">Tom2</Option>
  </Select>,
  document.getElementById('container'),
);
​

三种大小

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select, Radio } from 'choerodon-ui';
​
const Option = Select.Option;
​
const 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}`);
}
​
class SelectSizesDemo extends React.Component {
  state = {
    size: 'default',
  };
​
  handleSizeChange = e => {
    this.setState({ size: e.target.value });
  };
​
  render() {
    const { size } = this.state;
    return (
      <div>
        <Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>

多选

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select, Button } from 'choerodon-ui';
​
const Option = Select.Option;
​
const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i}>{i.toString(36) + i}</Option>);
}
​
class SelectMulitpleDemo extends React.Component {
  state = {
    loading: true,
    options: [],
  };
​
  componentDidMount() {
    this.getOptions();
  }
​
  getOptions = () => {
    setTimeout(() => {
      this.setState({
        options: children,
        loading: false,
      });
    }, 3000);
  };
​

标签

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
import classNames from 'classnames';
​
const Option = Select.Option;
​
const 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}`);
}
​
function handleRender(liNode, value) {
  console.log(value);
  return React.cloneElement(liNode, {
    className: classNames(liNode.props.className, 'choice-render'),
  });
}
​
ReactDOM.render(
  <Select
    mode="tags"
    style={{ width: '100%' }}
    label="标签用例"
    placeholder="tags"
    onChange={handleChange}

智能提示

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

推荐使用 AutoComplete 组件。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const Option = Select.Option;
​
class App extends React.Component {
  state = {
    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 needs to be false，as the value is dynamically generated
    return (
      <Select
        mode="combobox"
        style={{ width: 200 }}

分组

用 OptGroup 进行选项分组。

import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const { Option, OptGroup } = Select;
​
function handleChange(value) {
  console.log(`selected ${value}`);
}
​
ReactDOM.render(
  <Select defaultValue="lucy" style={{ width: 200 }} 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('container'),
);
​

联动

省市联动是典型的例子。

推荐使用 Cascader 组件。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const Option = Select.Option;
​
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
​
class App extends React.Component {
  state = {
    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,
    });
  };

搜索框

自动补全和远程数据结合。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
import jsonp from 'fetch-jsonp';
import queryString from 'querystringify';
​
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.stringify({
      code: 'utf-8',
      q: value,
    });
    jsonp(`https://suggest.taobao.com/sug?${str}`)
      .then(response => response.json())
      .then(d => {
        if (currentValue === value) {
          const result = d.result;
          const data = [];
          result.forEach(r => {

获得选项的文本

默认情况下 onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性。

选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。

import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const Option = Select.Option;
​
function handleChange(value) {
  console.log(value); // { key: "lucy", label: "Lucy (101)" }
}
​
ReactDOM.render(
  <Select
    labelInValue
    defaultValue={{ key: 'lucy' }}
    style={{ width: 120 }}
    onChange={handleChange}
  >
    <Option value="jack">Jack (100)</Option>
    <Option value="lucy">Lucy (101)</Option>
  </Select>,
  document.getElementById('container'),
);
​

自动分词

试下复制 露西,杰克 到输入框里。只在 tags 和 multiple 模式下可用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'choerodon-ui';
​
const Option = Select.Option;
​
const 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 mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
    {children}
  </Select>,
  document.getElementById('container'),
);
​

图标下拉框

图标下拉框。

import React from 'react';
import ReactDOM from 'react-dom';
import { IconSelect } from 'choerodon-ui';
​
ReactDOM.render(
  <IconSelect showAll style={{ width: '300px' }} defaultValue={['root']} />,
  document.getElementById('container'));
​

API

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

Select props

注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。

Select Methods

Option props

OptGroup props