• Select选择器
    • 何时使用
    • 代码演示
    • API
      • Select props
      • Select Methods
      • Option props
      • OptGroup props

    Select选择器

    下拉选择器。

    何时使用

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

    • 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

    代码演示

    Select 选择器 - 图1

    基本使用

    基本使用。

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    5. function handleChange(value) {
    6.   console.log(`selected ${value}`);
    7. }
    9. ReactDOM.render(
    10.   <div>
    11.     <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
    12.       <Option value="jack">Jack</Option>
    13.       <Option value="lucy">Lucy</Option>
    14.       <Option value="disabled" disabled>
    15.         Disabled
    16.       </Option>
    17.       <Option value="Yiminghe">yiminghe</Option>
    18.     </Select>
    19.     <Select defaultValue="lucy" style={{ width: 120 }} disabled>
    20.       <Option value="lucy">Lucy</Option>
    21.     </Select>
    22.     <Select defaultValue="lucy" style={{ width: 120 }} loading>
    23.       <Option value="lucy">Lucy</Option>
    24.     </Select>
    25.   </div>,
    26.   mountNode,
    27. );

    Select 选择器 - 图2

    多选

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    5. const children = [];
    6. for (let i = 10; i < 36; i++) {
    7.   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    8. }
    10. function handleChange(value) {
    11.   console.log(`selected ${value}`);
    12. }
    14. ReactDOM.render(
    15.   <Select
    16.     mode="multiple"
    17.     style={{ width: '100%' }}
    18.     placeholder="Please select"
    19.     defaultValue={['a10', 'c12']}
    20.     onChange={handleChange}
    21.   >
    22.     {children}
    23.   </Select>,
    24.   mountNode,
    25. );

    Select 选择器 - 图3

    标签

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    5. const children = [];
    6. for (let i = 10; i < 36; i++) {
    7.   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    8. }
    10. function handleChange(value) {
    11.   console.log(`selected ${value}`);
    12. }
    14. ReactDOM.render(
    15.   <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange}>
    16.     {children}
    17.   </Select>,
    18.   mountNode,
    19. );

    Select 选择器 - 图4

    联动

    省市联动是典型的例子。

    推荐使用 Cascader 组件。

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    4. const provinceData = ['Zhejiang', 'Jiangsu'];
    5. const cityData = {
    6.   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    7.   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
    8. };
    10. class App extends React.Component {
    11.   state = {
    12.     cities: cityData[provinceData[0]],
    13.     secondCity: cityData[provinceData[0]][0],
    14.   };
    16.   handleProvinceChange = value => {
    17.     this.setState({
    18.       cities: cityData[value],
    19.       secondCity: cityData[value][0],
    20.     });
    21.   };
    23.   onSecondCityChange = value => {
    24.     this.setState({
    25.       secondCity: value,
    26.     });
    27.   };
    29.   render() {
    30.     const { cities } = this.state;
    31.     return (
    32.       <div>
    33.         <Select
    34.           defaultValue={provinceData[0]}
    35.           style={{ width: 120 }}
    36.           onChange={this.handleProvinceChange}
    37.         >
    38.           {provinceData.map(province => (
    39.             <Option key={province}>{province}</Option>
    40.           ))}
    41.         </Select>
    42.         <Select
    43.           style={{ width: 120 }}
    44.           value={this.state.secondCity}
    45.           onChange={this.onSecondCityChange}
    46.         >
    47.           {cities.map(city => (
    48.             <Option key={city}>{city}</Option>
    49.           ))}
    50.         </Select>
    51.       </div>
    52.     );
    53.   }
    54. }
    56. ReactDOM.render(<App />, mountNode);

    Select 选择器 - 图5

    获得选项的文本

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

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    5. function handleChange(value) {
    6.   console.log(value); // { key: "lucy", label: "Lucy (101)" }
    7. }
    9. ReactDOM.render(
    10.   <Select
    11.     labelInValue
    12.     defaultValue={{ key: 'lucy' }}
    13.     style={{ width: 120 }}
    14.     onChange={handleChange}
    15.   >
    16.     <Option value="jack">Jack (100)</Option>
    17.     <Option value="lucy">Lucy (101)</Option>
    18.   </Select>,
    19.   mountNode,
    20. );

    Select 选择器 - 图6

    搜索用户

    一个带有远程搜索，防抖控制，请求时序控制，加载状态的多选示例。

    1. import { Select, Spin } from 'antd';
    2. import debounce from 'lodash/debounce';
    4. const Option = Select.Option;
    6. class UserRemoteSelect extends React.Component {
    7.   constructor(props) {
    8.     super(props);
    9.     this.lastFetchId = 0;
    10.     this.fetchUser = debounce(this.fetchUser, 800);
    11.   }
    13.   state = {
    14.     data: [],
    15.     value: [],
    16.     fetching: false,
    17.   };
    19.   fetchUser = value => {
    20.     console.log('fetching user', value);
    21.     this.lastFetchId += 1;
    22.     const fetchId = this.lastFetchId;
    23.     this.setState({ data: [], fetching: true });
    24.     fetch('https://randomuser.me/api/?results=5')
    25.       .then(response => response.json())
    26.       .then(body => {
    27.         if (fetchId !== this.lastFetchId) {
    28.           // for fetch callback order
    29.           return;
    30.         }
    31.         const data = body.results.map(user => ({
    32.           text: `${user.name.first} ${user.name.last}`,
    33.           value: user.login.username,
    34.         }));
    35.         this.setState({ data, fetching: false });
    36.       });
    37.   };
    39.   handleChange = value => {
    40.     this.setState({
    41.       value,
    42.       data: [],
    43.       fetching: false,
    44.     });
    45.   };
    47.   render() {
    48.     const { fetching, data, value } = this.state;
    49.     return (
    50.       <Select
    51.         mode="multiple"
    52.         labelInValue
    53.         value={value}
    54.         placeholder="Select users"
    55.         notFoundContent={fetching ? <Spin size="small" /> : null}
    56.         filterOption={false}
    57.         onSearch={this.fetchUser}
    58.         onChange={this.handleChange}
    59.         style={{ width: '100%' }}
    60.       >
    61.         {data.map(d => (
    62.           <Option key={d.value}>{d.text}</Option>
    63.         ))}
    64.       </Select>
    65.     );
    66.   }
    67. }
    69. ReactDOM.render(<UserRemoteSelect />, mountNode);

    Select 选择器 - 图7

    隐藏已选择选项

    隐藏下拉列表中已选择的选项。

    1. import { Select } from 'antd';
    3. const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
    5. class SelectWithHiddenSelectedOptions extends React.Component {
    6.   state = {
    7.     selectedItems: [],
    8.   };
    10.   handleChange = selectedItems => {
    11.     this.setState({ selectedItems });
    12.   };
    14.   render() {
    15.     const { selectedItems } = this.state;
    16.     const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
    17.     return (
    18.       <Select
    19.         mode="multiple"
    20.         placeholder="Inserted are removed"
    21.         value={selectedItems}
    22.         onChange={this.handleChange}
    23.         style={{ width: '100%' }}
    24.       >
    25.         {filteredOptions.map(item => (
    26.           <Select.Option key={item} value={item}>
    27.             {item}
    28.           </Select.Option>
    29.         ))}
    30.       </Select>
    31.     );
    32.   }
    33. }
    35. ReactDOM.render(<SelectWithHiddenSelectedOptions />, mountNode);

    Select 选择器 - 图8

    带搜索框

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    5. function onChange(value) {
    6.   console.log(`selected ${value}`);
    7. }
    9. function onBlur() {
    10.   console.log('blur');
    11. }
    13. function onFocus() {
    14.   console.log('focus');
    15. }
    17. function onSearch(val) {
    18.   console.log('search:', val);
    19. }
    21. ReactDOM.render(
    22.   <Select
    23.     showSearch
    24.     style={{ width: 200 }}
    25.     placeholder="Select a person"
    26.     optionFilterProp="children"
    27.     onChange={onChange}
    28.     onFocus={onFocus}
    29.     onBlur={onBlur}
    30.     onSearch={onSearch}
    31.     filterOption={(input, option) =>
    32.       option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    33.     }
    34.   >
    35.     <Option value="jack">Jack</Option>
    36.     <Option value="lucy">Lucy</Option>
    37.     <Option value="tom">Tom</Option>
    38.   </Select>,
    39.   mountNode,
    40. );

    Select 选择器 - 图9

    三种大小

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

    1. import { Select, Radio } from 'antd';
    3. const Option = Select.Option;
    5. const children = [];
    6. for (let i = 10; i < 36; i++) {
    7.   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    8. }
    10. function handleChange(value) {
    11.   console.log(`Selected: ${value}`);
    12. }
    14. class SelectSizesDemo extends React.Component {
    15.   state = {
    16.     size: 'default',
    17.   };
    19.   handleSizeChange = e => {
    20.     this.setState({ size: e.target.value });
    21.   };
    23.   render() {
    24.     const { size } = this.state;
    25.     return (
    26.       <div>
    27.         <Radio.Group value={size} onChange={this.handleSizeChange}>
    28.           <Radio.Button value="large">Large</Radio.Button>
    29.           <Radio.Button value="default">Default</Radio.Button>
    30.           <Radio.Button value="small">Small</Radio.Button>
    31.         </Radio.Group>
    32.         <br />
    33.         <br />
    34.         <Select size={size} defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
    35.           {children}
    36.         </Select>
    37.         <br />
    38.         <Select
    39.           mode="multiple"
    40.           size={size}
    41.           placeholder="Please select"
    42.           defaultValue={['a10', 'c12']}
    43.           onChange={handleChange}
    44.           style={{ width: '100%' }}
    45.         >
    46.           {children}
    47.         </Select>
    48.         <br />
    49.         <Select
    50.           mode="tags"
    51.           size={size}
    52.           placeholder="Please select"
    53.           defaultValue={['a10', 'c12']}
    54.           onChange={handleChange}
    55.           style={{ width: '100%' }}
    56.         >
    57.           {children}
    58.         </Select>
    59.       </div>
    60.     );
    61.   }
    62. }
    64. ReactDOM.render(<SelectSizesDemo />, mountNode);
    1. .code-box-demo .ant-select {
    2.   margin: 0 8px 10px 0;
    3. }
    5. #components-select-demo-search-box .code-box-demo .ant-select {
    6.   margin: 0;
    7. }

    Select 选择器 - 图10

    分组

    用 OptGroup 进行选项分组。

    1. import { Select } from 'antd';
    3. const { Option, OptGroup } = Select;
    5. function handleChange(value) {
    6.   console.log(`selected ${value}`);
    7. }
    9. ReactDOM.render(
    10.   <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
    11.     <OptGroup label="Manager">
    12.       <Option value="jack">Jack</Option>
    13.       <Option value="lucy">Lucy</Option>
    14.     </OptGroup>
    15.     <OptGroup label="Engineer">
    16.       <Option value="Yiminghe">yiminghe</Option>
    17.     </OptGroup>
    18.   </Select>,
    19.   mountNode,
    20. );

    Select 选择器 - 图11

    搜索框

    搜索和远程数据结合。

    1. import { Select } from 'antd';
    2. import jsonp from 'fetch-jsonp';
    3. import querystring from 'querystring';
    5. const Option = Select.Option;
    7. let timeout;
    8. let currentValue;
    10. function fetch(value, callback) {
    11.   if (timeout) {
    12.     clearTimeout(timeout);
    13.     timeout = null;
    14.   }
    15.   currentValue = value;
    17.   function fake() {
    18.     const str = querystring.encode({
    19.       code: 'utf-8',
    20.       q: value,
    21.     });
    22.     jsonp(`https://suggest.taobao.com/sug?${str}`)
    23.       .then(response => response.json())
    24.       .then(d => {
    25.         if (currentValue === value) {
    26.           const result = d.result;
    27.           const data = [];
    28.           result.forEach(r => {
    29.             data.push({
    30.               value: r[0],
    31.               text: r[0],
    32.             });
    33.           });
    34.           callback(data);
    35.         }
    36.       });
    37.   }
    39.   timeout = setTimeout(fake, 300);
    40. }
    42. class SearchInput extends React.Component {
    43.   state = {
    44.     data: [],
    45.     value: undefined,
    46.   };
    48.   handleSearch = value => {
    49.     fetch(value, data => this.setState({ data }));
    50.   };
    52.   handleChange = value => {
    53.     this.setState({ value });
    54.   };
    56.   render() {
    57.     const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
    58.     return (
    59.       <Select
    60.         showSearch
    61.         value={this.state.value}
    62.         placeholder={this.props.placeholder}
    63.         style={this.props.style}
    64.         defaultActiveFirstOption={false}
    65.         showArrow={false}
    66.         filterOption={false}
    67.         onSearch={this.handleSearch}
    68.         onChange={this.handleChange}
    69.         notFoundContent={null}
    70.       >
    71.         {options}
    72.       </Select>
    73.     );
    74.   }
    75. }
    77. ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);

    Select 选择器 - 图12

    自动分词

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

    1. import { Select } from 'antd';
    3. const Option = Select.Option;
    5. const children = [];
    6. for (let i = 10; i < 36; i++) {
    7.   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    8. }
    10. function handleChange(value) {
    11.   console.log(`selected ${value}`);
    12. }
    14. ReactDOM.render(
    15.   <Select mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
    16.     {children}
    17.   </Select>,
    18.   mountNode,
    19. );

    Select 选择器 - 图13

    扩展菜单

    使用 dropdownRender 对下拉菜单进行自由扩展。

    1. import { Select, Icon, Divider } from 'antd';
    3. const Option = Select.Option;
    5. ReactDOM.render(
    6.   <Select
    7.     defaultValue="lucy"
    8.     style={{ width: 120 }}
    9.     dropdownRender={menu => (
    10.       <div>
    11.         {menu}
    12.         <Divider style={{ margin: '4px 0' }} />
    13.         <div style={{ padding: '8px', cursor: 'pointer' }}>
    14.           <Icon type="plus" /> Add item
    15.         </div>
    16.       </div>
    17.     )}
    18.   >
    19.     <Option value="jack">Jack</Option>
    20.     <Option value="lucy">Lucy</Option>
    21.   </Select>,
    22.   mountNode,
    23. );

    API

    1. <select>
    2.   <option value="lucy">lucy</option>
    3. </select>

    Select props

    参数说明类型默认值
    allowClear支持清除booleanfalse
    autoClearSearchValue是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。booleantrue
    autoFocus默认获取焦点booleanfalse
    defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
    defaultValue指定默认选中的条目string|string[]\number|number[]\LabeledValue|LabeledValue[]-
    disabled是否禁用booleanfalse
    dropdownClassName下拉菜单的 className 属性string-
    dropdownMatchSelectWidth下拉菜单和选择器同宽booleantrue
    dropdownRender自定义下拉框内容(menuNode: ReactNode, props) => ReactNode-
    dropdownStyle下拉菜单的 style 属性object-
    filterOption是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。boolean or function(inputValue, option)true
    firstActiveValue默认高亮的选项string|string[]-
    getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例Function(triggerNode)() => document.body
    labelInValue是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: ReactNode} 的格式booleanfalse
    maxTagCount最多显示多少个 tagnumber-
    maxTagTextLength最大显示的 tag 文本长度number-
    maxTagPlaceholder隐藏 tag 时显示的内容ReactNode/function(omittedValues)-
    mode设置 Select 的模式为多选或标签'multiple' | 'tags'-
    notFoundContent当下拉列表为空时显示的内容string'Not Found'
    optionFilterProp搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索stringvalue
    optionLabelProp回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。stringchildren （combobox 模式下为 value）
    placeholder选择框默认文字string-
    showArrow是否显示下拉小箭头booleantrue
    showSearch使单选模式可搜索booleanfalse
    size选择框大小，可选 large smallstringdefault
    suffixIcon自定义的选择框后缀图标ReactNode-
    removeIcon自定义的多选框清除图标ReactNode-
    clearIcon自定义的多选框清空图标ReactNode-
    menuItemSelectedIcon自定义当前选中的条目图标ReactNode-
    tokenSeparators在 tags 和 multiple 模式下自动分词的分隔符string[]
    value指定当前选中的条目string|string[]\number|number[]\LabeledValue|LabeledValue[]-
    onBlur失去焦点的时回调function-
    onChange选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数function(value, option:Option/Array<Option>)-
    onDeselect取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效function(string|number|LabeledValue)-
    onFocus获得焦点时回调function-
    onMouseEnter鼠标移入时回调function-
    onMouseLeave鼠标移出时回调function-
    onPopupScroll下拉列表滚动时的回调function-
    onSearch文本框值变化时回调function(value: string)
    onSelect被选中时调用，参数为选中项的 value (或 key) 值function(string|number|LabeledValue, option:Option)-
    defaultOpen是否默认展开下拉菜单boolean-
    open是否展开下拉菜单boolean-
    onDropdownVisibleChange展开下拉菜单的回调 (3.9.0 后支持)function(open)-
    loading加载中状态Booleanfalse

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

    Select Methods

    名称说明
    blur()取消焦点
    focus()获取焦点

    Option props

    参数说明类型默认值
    disabled是否禁用booleanfalse
    key和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置string
    title选中该 Option 后，Select 的 titlestring-
    value默认根据此属性值进行筛选string|number-
    classNameOption 器类名string-

    OptGroup props

    参数说明类型默认值
    keystring-
    label组名string|React.Element无