Select 选择器

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

何时使用

Select

如果你不期望用户输入的值生效而仅仅是选择，那么使用Select. 同时可以使用Select的showSearch属性进行过滤。

Combobox

唯一和Select不一致的点在于Combobox会保留用户输入的值。

常见问题

出现类似的

Select默认使用value作为菜单项的key，如果没有设置key值，则使用默认的序列index作为key值，确保这些值不会发生重复。

Combobox与Field配合使用

由于Field会让组件变成受控组件，所以如果你发现你的输入框无法输入值，记得监听下onInputUpdate，然后调用Field的setValue方法进行赋值。

伪代码如下

  1. this.field.setValue(name, value);

dataSource的使用

Select同时支持children和在props中传入dataSource作为数据源,如果同时设置,则以children为准.

注意： Select默认使用value作为渲染的菜单项的key值，所以value不能重复, 否则无法渲染下拉菜单

  • children的方式
  1. <Select>
  2.     <Select.Option value="option1">option1</Select.Option>
  3.     <Select.Option value="option2">option2</Select.Option>
  4.     <Select.Option disabled>disabled</Select.Option>
  5. </Select>
  • props的方式
  1. const dataSource = [
  2.     {label:'option1', value:'option1'},
  3.     {label:'option2', value:'option2'},
  4.     {label:'disabled', disabled:true}
  5. ]
  6. <Select dataSource={dataSource}/>

定制弹出层

参见示例中的弹层定制。唯一需要注意的是overlay的元素记得透传props.这是因为Overlay的弹层的动画是依靠className实现的，如果不透传props则会造成无法监听到动画播放结束的事件。

API

选择器

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
container弹层挂载容器节点String/Function-
size选择器的尺寸可选值:'small', 'medium', 'large'Enum'medium'
shape选择器的形状可选值:'normal', 'arrow-only'Enum'normal'
placeholder没有值的时候的占位符String''
value当前值String/Array/ReactNode/Object-
defaultValue初始默认值String/Array/ReactNode/Object-
visible当前弹层是否显示Boolean-
defaultVisible弹层初始是否显示Boolean-
disabled是否禁用Booleanfalse
dataSource传入的数据，可以动态渲染子项,详见dataSource的使用Array-
multiple是否是多选Booleanfalse
fillProps填充到选择框里面的值String'label'
showSearch是否显示顶部的搜索框Booleanfalse
filterBy在输入的时候过滤的函数,仅在filterLocal为true时候有效签名:Function(filterValue: String, option: Object) => Boolean参数:filterValue: {String} 筛选值option: {Object} 选项返回值:{Boolean} 是否保留当前选项Function-
filterLocal是否使用本地过滤,在数据源为远程的时候需要关闭此选项Booleantrue
hasArrow是否显示右侧的箭头Booleantrue
autoWidth下拉菜单是否与选择器对齐Booleantrue
onChangeSelect发生改变的时候触发的回调签名:Function(value: String, option: Object) => void参数:value: {String} 数据option: {Object} 选项Function() => {}
onSearch在搜索框中输入触发的事件，仅在showSearch为true时候有效签名:Function(value: String) => void参数:value: {String} 搜索值Function() => {}
hasClear是否显示清空按钮，该按钮可以清空select的value, 该属性仅在单选模式下有效Booleanfalse
popupClassName弹出层的样式类String-
popupProps弹出层的属性Object-
onVisibleChange弹层显示或隐藏的时候触发的事件签名:Function(visible: Boolean) => void参数:visible: {Boolean} 弹层是否隐藏和显示Function() => {}
onOpen弹层显示时触发的事件签名:Function() => voidFunction() => {}
onClose弹层隐藏时触发的事件签名:Function() => voidFunction() => {}
locale自定义国际化文案对象属性:selectPlaceHolder: {String} 请选择的提示文案comboboxPlaceHolder: {String} 请输入的提示文案Object{ selectPlaceHolder: '请选择', comboboxPlaceHolder: '请输入' }
language自定义国际化语言可选值:'en-us', 'zh-cn', 'zh-tw'Enum-

Select.Combobox

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
container弹层挂载容器节点String/Function-
size选择器的尺寸可选值:'small', 'medium', 'large'Enum'medium'
shape选择器的形状可选值:'normal', 'arrow-only'Enum'normal'
placeholder没有值的时候的占位符String''
value当前值String/Array/ReactNode/Object-
defaultValue初始默认值String/Array/ReactNode/Object-
visible当前弹层是否显示Boolean-
defaultVisible弹层初始是否显示Boolean-
disabled是否禁用Booleanfalse
dataSource传入的数据，可以动态渲染子项,详见dataSource的使用Array-
multiple是否是多选Booleanfalse
tags是否启用标签模式, 仅在多选时有效,效果是除了自动提示外的选项, 也可以使用输入的文字作为标签Boolean-
fillProps填充到选择框里面的值String'value'
showSearch是否显示顶部的搜索框Booleanfalse
filterBy在输入的时候过滤的函数,仅在filterLocal为true时候有效签名:Function(filterValue: String, option: Object) => Boolean参数:filterValue: {String} 筛选值option: {Object} 选项返回值:{Boolean} 是否保留当前选项Function-
filterLocal是否使用本地过滤,在数据源为远程的时候需要关闭此选项Booleantrue
hasArrow是否显示右侧的箭头Booleantrue
autoWidth下拉菜单是否与选择器对齐Booleantrue
hiddenSelected选择后是否立即隐藏菜单，单选是默认隐藏的，因此该选项只在多选的时候有效Booleanfalse
onInputUpdateCombobox在用户输入的时候触发的回调签名:Function(value: String) => void参数:value: {String} 输入值Function() => {}
onInputFocusCombobox获取焦点的时候触发的回调签名:Function(e: Event, clickByUser: Boolean) => void参数:e: {Event} DOM事件对象clickByUser: {Boolean} 是否用户点击Function() => {}
onInputBlurCombobox失去焦点的时候触发的回调签名:Function(e: Event, inputValue: String) => void参数:e: {Event} DOM事件对象inputValue: {String} 输入值Function() => {}
onInputEnterCombobox回车的时候触发的回调签名:Function(e: Event) => void参数:e: {Event} DOM事件对象Function() => {}
onChangeCombobox发生改变的时候触发的回调, 注意在输入的时候该事件不会被触发，如果需要监听输入的事件请使用onInputUpdate签名:Function(value: String, option: Object) => void参数:value: {String} 数据option: {Object} 选项Function() => {}
onSearch在搜索框中输入触发的事件，仅在showSearch为true时候有效签名:Function(value: String) => void参数:value: {String} 搜索值Function() => {}
hasClear是否显示清空按钮，该按钮可以清空select的value, 该属性仅在单选模式下有效Booleanfalse
popupClassName弹出层的样式类String-
popupProps弹出层的属性Object-
onVisibleChange弹层显示或隐藏的时候触发的事件签名:Function(visible: Boolean) => void参数:visible: {Boolean} 弹层是否隐藏和显示Function() => {}
onOpen弹层显示时触发的事件签名:Function() => voidFunction() => {}
onClose弹层隐藏时触发的事件签名:Function() => voidFunction() => {}
locale自定义国际化文案对象属性:selectPlaceHolder: {String} 请选择的提示文案comboboxPlaceHolder: {String} 请输入的提示文案Object{ selectPlaceHolder: '请选择', comboboxPlaceHolder: '请输入' }
language自定义国际化语言可选值:'en-us', 'zh-cn', 'zh-tw'Enum-

Select.OptionGroup

参数说明类型默认值
label设置分组的文案String/ReactNode-

Select.Option

参数说明类型默认值
value选项值any-
disabled是否禁用Boolean-

代码示例

Combobox

演示了Combobox的多种形态.

Select 选择器 - 图1

查看源码在线预览

  1. import { Select, Button } from "@icedesign/base";
  3. const { Combobox } = Select;
  5. const onChange = function(...args) {
  6.   console.log(args);
  7. };
  9. class App extends React.Component {
  10.   constructor(props) {
  11.     super(props);
  12.     this.state = {};
  13.   }
  15.   onToggle() {
  16.     this.setState({
  17.       disabled: !this.state.disabled
  18.     });
  19.   }
  21.   onSelect(type, value) {
  22.     switch (type) {
  23.       case "mode":
  24.         this.setState({
  25.           [type]: value === "multiple"
  26.         });
  27.         break;
  28.       case "search":
  29.       case "hasArrow":
  30.       case "hasClear":
  31.         this.setState({
  32.           [type]: value === "yes"
  33.         });
  34.         break;
  35.       default:
  36.         this.setState({
  37.           [type]: value
  38.         });
  39.     }
  40.   }
  42.   onInputUpdate(value) {
  43.     console.log(value);
  44.   }
  46.   onInputBlur(e, value) {
  47.     console.log("blur", value);
  48.   }
  49.   render() {
  50.     return (
  51.       <div className="demo-ctl">
  52.         <p>
  53.           <Select
  54.             placeholder="选择尺寸"
  55.             onChange={this.onSelect.bind(this, "size")}
  56.           >
  57.             <Option value="small">Small</Option>
  58.             <Option value="medium">Medium</Option>
  59.             <Option value="large">Large</Option>
  60.           </Select>
  61.           <Select
  62.             placeholder="选择模式"
  63.             onChange={this.onSelect.bind(this, "mode")}
  64.           >
  65.             <Option value="single">单选</Option>
  66.             <Option value="multiple">多选</Option>
  67.           </Select>
  68.           <Select
  69.             placeholder="显示箭头"
  70.             onChange={this.onSelect.bind(this, "hasArrow")}
  71.           >
  72.             <Option value="yes">常规</Option>
  73.             <Option value="no">无下拉箭头</Option>
  74.           </Select>
  75.           <Select
  76.             placeholder="显示清空按钮"
  77.             onChange={this.onSelect.bind(this, "hasClear")}
  78.           >
  79.             <Option value="no">不显示</Option>
  80.             <Option value="yes">显示</Option>
  81.           </Select>
  82.           <Select
  83.             placeholder="填充属性"
  84.             onChange={this.onSelect.bind(this, "fillProps")}
  85.           >
  86.             <Option value="value">value</Option>
  87.             <Option value="label">label</Option>
  88.           </Select>
  89.           <Button onClick={this.onToggle.bind(this)} type="primary">
  90.             Toggle disabled
  91.           </Button>
  92.         </p>
  93.         <h4>预览</h4>
  94.         <Combobox
  95.           size={this.state.size}
  96.           multiple={this.state.mode}
  97.           hasArrow={this.state.hasArrow}
  98.           disabled={this.state.disabled}
  99.           fillProps={this.state.fillProps}
  100.           hasClear={this.state.hasClear}
  101.           onChange={onChange}
  102.           onInputBlur={this.onInputBlur.bind(this)}
  103.           onInputUpdate={this.onInputUpdate.bind(this)}
  104.         >
  105.           <Option value="">空</Option>
  106.           <Option value="jack">Jack</Option>
  107.           <Option value="lucy">Lucy</Option>
  108.           <Option value="andy">Andy</Option>
  109.           <Option value="disabled" disabled>
  110.             Disabled
  111.           </Option>
  112.         </Combobox>
  113.       </div>
  114.     );
  115.   }
  116. }
  117. ReactDOM.render(<App />, mountNode);
  1. .next-select{
  2.     margin-right:10px;
  3.     vertical-align: middle;
  4. }
  5. .demo-ctl {
  6.   background-color: #f6f6f6;
  7.   padding: 20px;
  8.   margin-bottom: 10px;
  9.   margin-top: 10px;
  10. }
  11. .demo-ctl p {
  12.     margin-top:0;
  13. }

受控Combo

演示Combobox的受控状态

Select 选择器 - 图2

查看源码在线预览

  1. import { Select } from "@icedesign/base";
  2. import jsonp from "jsonp";
  4. const { Combobox } = Select;
  6. class App extends React.Component {
  7.   state = {
  8.     dataSource: [],
  9.     value: "test"
  10.   };
  11.   onInputUpdate(value) {
  12.     if (this.searchTimeout) {
  13.       clearTimeout(this.searchTimeout);
  14.     }
  15.     this.searchTimeout = setTimeout(() => {
  16.       jsonp(
  17.         `https://suggest.taobao.com/sug?code=utf-8&q=${value}`,
  18.         (err, data) => {
  19.           const dataSource = data.result.map(item => {
  20.             return {
  21.               label: item[0],
  22.               value: item[1]
  23.             };
  24.           });
  25.           this.setState({
  26.             dataSource
  27.           });
  28.         }
  29.       );
  30.     }, 100);
  31.     //单选情况下需要更新input的值
  32.     this.setState({
  33.       value
  34.     });
  35.   }
  36.   onChange(value) {
  37.     this.setState({
  38.       value
  39.     });
  40.   }
  41.   render() {
  42.     return (
  43.       <div className="demo-ctl">
  44.         <Combobox
  45.           onInputUpdate={this.onInputUpdate.bind(this)}
  46.           filterLocal={false}
  47.           value={this.state.value}
  48.           fillProps="label"
  49.           placeholder="请输入淘宝商品"
  50.           onChange={this.onChange.bind(this)}
  51.           dataSource={this.state.dataSource}
  52.         />
  53.       </div>
  54.     );
  55.   }
  56. }
  57. ReactDOM.render(<App />, mountNode);
  1. .next-select{
  2.     margin-right:10px;
  3.     vertical-align: middle;
  4. }
  5. .demo-ctl {
  6.   background-color: #f6f6f6;
  7.   padding: 20px;
  8.   margin-bottom: 10px;
  9.   margin-top: 10px;
  10. }
  11. .demo-ctl p {
  12.     margin-top:0;
  13. }

多选受控

演示多选情况下Combobox的受控状态

Select 选择器 - 图3

查看源码在线预览

  1. import { Select } from "@icedesign/base";
  2. import jsonp from "jsonp";
  4. const { Combobox } = Select;
  6. class App extends React.Component {
  7.   state = {
  8.     dataSource: [],
  9.     value: "test"
  10.   };
  11.   //多选情况下不需要更新input的值
  12.   onInputUpdate(value) {
  13.     if (this.searchTimeout) {
  14.       clearTimeout(this.searchTimeout);
  15.     }
  16.     this.searchTimeout = setTimeout(() => {
  17.       jsonp(
  18.         `https://suggest.taobao.com/sug?code=utf-8&q=${value}`,
  19.         (err, data) => {
  20.           const dataSource = data.result.map(item => {
  21.             return {
  22.               label: item[0],
  23.               value: item[1]
  24.             };
  25.           });
  26.           this.setState({
  27.             dataSource
  28.           });
  29.         }
  30.       );
  31.     }, 100);
  32.   }
  33.   onChange(value) {
  34.     this.setState({
  35.       value
  36.     });
  37.   }
  38.   render() {
  39.     return (
  40.       <div className="demo-ctl">
  41.         <Combobox
  42.           onInputUpdate={this.onInputUpdate.bind(this)}
  43.           filterLocal={false}
  44.           value={this.state.value}
  45.           fillProps="label"
  46.           multiple
  47.           placeholder="请输入淘宝商品"
  48.           onChange={this.onChange.bind(this)}
  49.           dataSource={this.state.dataSource}
  50.         />
  51.       </div>
  52.     );
  53.   }
  54. }
  55. ReactDOM.render(<App />, mountNode);
  1. .next-select{
  2.     margin-right:10px;
  3.     vertical-align: middle;
  4. }
  5. .demo-ctl {
  6.   background-color: #f6f6f6;
  7.   padding: 20px;
  8.   margin-bottom: 10px;
  9.   margin-top: 10px;
  10. }
  11. .demo-ctl p {
  12.     margin-top:0;
  13. }

动态数据

使用动态数据填充Combobox, 设置filterLocal为false

Select 选择器 - 图4

查看源码在线预览

  1. import { Select } from "@icedesign/base";
  2. import jsonp from "jsonp";
  4. const { Combobox } = Select;
  6. const onChange = function(...args) {
  7.   console.log(args);
  8. };
  10. class App extends React.Component {
  11.   state = {
  12.     dataSource: []
  13.   };
  14.   onInputUpdate(value) {
  15.     if (this.searchTimeout) {
  16.       clearTimeout(this.searchTimeout);
  17.     }
  18.     this.searchTimeout = setTimeout(() => {
  19.       jsonp(
  20.         `https://suggest.taobao.com/sug?code=utf-8&q=${value}`,
  21.         (err, data) => {
  22.           const dataSource = data.result.map(item => {
  23.             return {
  24.               label: item[0],
  25.               value: item[1]
  26.             };
  27.           });
  28.           this.setState({
  29.             dataSource
  30.           });
  31.         }
  32.       );
  33.     }, 100);
  34.   }
  35.   render() {
  36.     return (
  37.       <div className="demo-ctl">
  38.         <Combobox
  39.           onInputUpdate={this.onInputUpdate.bind(this)}
  40.           filterLocal={false}
  41.           fillProps="label"
  42.           placeholder="请输入淘宝商品"
  43.           onChange={onChange}
  44.           dataSource={this.state.dataSource}
  45.         />
  46.       </div>
  47.     );
  48.   }
  49. }
  50. ReactDOM.render(<App />, mountNode);
  1. .next-select{
  2.     margin-right:10px;
  3.     vertical-align: middle;
  4. }
  5. .demo-ctl {
  6.   background-color: #f6f6f6;
  7.   padding: 20px;
  8.   margin-bottom: 10px;
  9.   margin-top: 10px;
  10. }
  11. .demo-ctl p {
  12.     margin-top:0;
  13. }

图文展示

展示较为复杂的内容

Select 选择器 - 图5

查看源码在线预览

  1. import { Select, Icon } from "@icedesign/base";
  2. import jsonp from "jsonp";
  4. const { Combobox } = Select;
  6. const onChange = function(...args) {
  7.   console.log(args);
  8. };
  10. const formatter = function(item) {
  11.   return (
  12.     <div>
  13.       <Icon type="gifts" size="small" />&nbsp;{item}
  14.     </div>
  15.   );
  16. };
  18. class App extends React.Component {
  19.   state = {
  20.     dataSource: []
  21.   };
  22.   onInputUpdate(value) {
  23.     if (this.searchTimeout) {
  24.       clearTimeout(this.searchTimeout);
  25.     }
  26.     this.searchTimeout = setTimeout(() => {
  27.       jsonp(
  28.         `https://suggest.taobao.com/sug?code=utf-8&q=${value}`,
  29.         (err, data) => {
  30.           const dataSource = data.result.map(item => {
  31.             return {
  32.               label: formatter(item[0]),
  33.               value: item[1],
  34.               originLabel: item[0]
  35.             };
  36.           });
  37.           this.setState({
  38.             dataSource
  39.           });
  40.         }
  41.       );
  42.     }, 100);
  43.   }
  44.   // 由于这个时候展示的是富文本，所以fillProps需要设置成展示合理的值(originLabel)
  45.   render() {
  46.     return (
  47.       <div className="demo-ctl">
  48.         <Combobox
  49.           onInputUpdate={this.onInputUpdate.bind(this)}
  50.           filterLocal={false}
  51.           fillProps="originLabel"
  52.           placeholder="请输入淘宝商品"
  53.           onChange={onChange}
  54.           dataSource={this.state.dataSource}
  55.         />
  56.       </div>
  57.     );
  58.   }
  59. }
  60. ReactDOM.render(<App />, mountNode);
  1. .next-select{
  2.     margin-right:10px;
  3.     vertical-align: middle;
  4. }
  5. .demo-ctl {
  6.   background-color: #f6f6f6;
  7.   padding: 20px;
  8.   margin-bottom: 10px;
  9.   margin-top: 10px;
  10. }
  11. .demo-ctl p {
  12.     margin-top:0;
  13. }

tags

演示combobox的tags功能

Select 选择器 - 图6

查看源码在线预览

  1. import { Select, Button } from "@icedesign/base";
  3. const { Combobox } = Select;
  5. class App extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {
  9.       dataSource: [
  10.         {
  11.           value: "测试",
  12.           label: "测试",
  13.           time: 123
  14.         }
  15.       ],
  16.       value: "测试",
  17.       visible: false
  18.     };
  19.   }
  20.   render() {
  21.     return (
  22.       <div className="demo-ctl">
  23.         <p>
  24.           <Button onClick={this.toggleTags.bind(this)}>切换tags模式</Button>&nbsp;
  25.           <Button onClick={this.toggleHiddenSelect.bind(this)}>
  26.             切换在多选的时候是否隐藏菜单
  27.           </Button>&nbsp;
  28.           <Button onClick={this.toggleVisible.bind(this)} ref="visibleElement">
  29.             切换显示
  30.           </Button>&nbsp;
  31.         </p>
  32.         <Combobox
  33.           size="large"
  34.           value={this.state.value}
  35.           dataSource={this.state.dataSource}
  36.           onChange={this.onChange.bind(this)}
  37.           onInputUpdate={this.onInputUpdate.bind(this)}
  38.           multiple
  39.           tags={this.state.tags}
  40.           filterLocal={false}
  41.           safeNode={() => this.refs.visibleElement}
  42.           visible={this.state.visible}
  43.           onInputBlur={() => console.log("blur")}
  44.           onVisibleChange={this.onVisibleChange.bind(this)}
  45.           hiddenSelected={this.state.hiddenSelected}
  46.         />
  47.       </div>
  48.     );
  49.   }
  50.   onInputUpdate(value) {
  51.     let options;
  52.     if (!value || value.indexOf("@") > 0) {
  53.       options = [];
  54.     } else {
  55.       options = ["126.com", "163.com", "gmail.com"].map(mail => {
  56.         return {
  57.           label: value + "@" + mail,
  58.           value: value + "@" + mail,
  59.           time: Math.random()
  60.         };
  61.       });
  62.     }
  63.     this.setState({ dataSource: options });
  64.   }
  65.   onChange(value, item) {
  66.     this.setState({ value });
  67.     console.log(item);
  68.   }
  69.   toggleTags() {
  70.     this.setState({ tags: !this.state.tags });
  71.   }
  72.   toggleHiddenSelect() {
  73.     this.setState({ hiddenSelected: !this.state.hiddenSelected });
  74.   }
  75.   toggleVisible() {
  76.     this.setState({ visible: !this.state.visible });
  77.   }
  78.   onVisibleChange(visible) {
  79.     this.setState({ visible });
  80.   }
  81. }
  82. ReactDOM.render(<App />, mountNode);
  1. .demo-ctl {
  2.   background-color: #f6f6f6;
  3.   padding: 20px;
  4.   margin-bottom: 10px;
  5.   margin-top: 10px;
  6. }
  7. .demo-ctl p {
  8.     margin-top:0;
  9. }

弹层定制

通过overlay定制select弹层

Select 选择器 - 图7

查看源码在线预览

  1. import { Select } from "@icedesign/base";
  2. import classnames from "classnames";
  4. /* eslint-disable react/prop-types, react/no-multi-comp */
  5. class Menu extends React.Component {
  6.   data = [
  7.     {
  8.       label: "value1",
  9.       value: 1
  10.     },
  11.     {
  12.       label: "value2",
  13.       value: 2
  14.     }
  15.   ];
  16.   render() {
  17.     const { className, ...others } = this.props;
  18.     const cls = classnames({
  19.       "overlay-content": true,
  20.       [className]: className
  21.     });
  22.     return (
  23.       <ul className={cls} {...others}>
  24.         {this.renderItems()}
  25.       </ul>
  26.     );
  27.   }
  28.   renderItems() {
  29.     return this.data.map(item => (
  30.       <li onClick={this.onClick.bind(this, item)} key={item.value}>
  31.         {item.label}
  32.       </li>
  33.     ));
  34.   }
  35.   onClick(item) {
  36.     this.props.onChange(item);
  37.   }
  38. }
  40. class App extends React.Component {
  41.   constructor(props) {
  42.     super(props);
  43.     this.state = {
  44.       value: null
  45.     };
  46.   }
  47.   onSelect = value => {
  48.     this.setState({
  49.       value,
  50.       visible: false
  51.     });
  52.   };
  53.   onVisibleChange = visible => {
  54.     this.setState({
  55.       visible
  56.     });
  57.   };
  58.   render() {
  59.     const overlay = <Menu onChange={this.onSelect} />;
  60.     return (
  61.       <div className="demo-ctl">
  62.         <Select
  63.           placeholder="选择自定义数据"
  64.           visible={this.state.visible}
  65.           onVisibleChange={this.onVisibleChange}
  66.           value={this.state.value}
  67.           overlay={overlay}
  68.         />
  69.       </div>
  70.     );
  71.   }
  72. }
  73. ReactDOM.render(<App />, mountNode);
.next-select{
    margin-right:10px;
    vertical-align: middle;
}
.demo-ctl {
  background-color: #f6f6f6;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.demo-ctl p {
    margin-top:0;
}
.overlay-content{
    border:1px solid #ddd;
    padding:10px;
    background:#fff;
    margin:0;
    min-width:150px;
    font-family: Arial;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}
.overlay-content li{
    list-style: none;
    line-height:30px;
    padding: 0 5px;
    cursor: pointer;
}
.overlay-content li:hover{
    background:#f8f8f8;
}
.overlay-content li:last-child{
    border-width:0;
}

基本使用

演示了Select的多种形态.

Select 选择器 - 图8

查看源码在线预览

import { Select, Button } from "@icedesign/base";

const { Option } = Select;

const onChange = function(...args) {
  console.log(args);
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="demo-ctl">
        <p>
          <Select
            placeholder="选择尺寸"
            onChange={this.onSelect.bind(this, "size")}
          >
            <Option value="small">Small</Option>
            <Option value="medium">Medium</Option>
            <Option value="large">Large</Option>
          </Select>
          <Select
            placeholder="选择模式"
            onChange={this.onSelect.bind(this, "mode")}
          >
            <Option value="single">单选</Option>
            <Option value="multiple">多选</Option>
          </Select>
          <Select
            placeholder="显示搜索框"
            onChange={this.onSelect.bind(this, "search")}
          >
            <Option value="no">不显示</Option>
            <Option value="yes">显示</Option>
          </Select>
          <Select
            placeholder="选择形状"
            onChange={this.onSelect.bind(this, "shape")}
          >
            <Option value="normal">常规</Option>
            <Option value="arrow-only">无边框</Option>
          </Select>
          <Select
            placeholder="显示箭头"
            onChange={this.onSelect.bind(this, "hasArrow")}
          >
            <Option value="yes">常规</Option>
            <Option value="no">无下拉箭头</Option>
          </Select>
          <Select
            placeholder="显示清空按钮"
            onChange={this.onSelect.bind(this, "hasClear")}
          >
            <Option value="no">不显示</Option>
            <Option value="yes">显示</Option>
          </Select>
          <Button onClick={this.onToggle.bind(this)} type="primary">
            Toggle disabled
          </Button>
        </p>
        <h4>预览</h4>
        <Select
          size={this.state.size}
          multiple={this.state.mode}
          showSearch={this.state.search}
          shape={this.state.shape}
          hasArrow={this.state.hasArrow}
          disabled={this.state.disabled}
          hasClear={this.state.hasClear}
          onChange={onChange}
        >
          <Option value="">空</Option>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="andy">Andy</Option>
          <Option value="disabled" disabled>
            Disabled
          </Option>
        </Select>
      </div>
    );
  }
  onToggle() {
    this.setState({
      disabled: !this.state.disabled
    });
  }
  onSelect(type, value) {
    switch (type) {
      case "mode":
        this.setState({
          [type]: value === "multiple"
        });
        break;
      case "search":
      case "hasArrow":
      case "hasClear":
        this.setState({
          [type]: value === "yes"
        });
        break;
      default:
        this.setState({
          [type]: value
        });
    }
  }
}
ReactDOM.render(<App />, mountNode);


.next-select{
    margin-right:10px;
    vertical-align: middle;
    margin-top:5px;
}

.demo-ctl {
  background-color: #f6f6f6;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.demo-ctl p {
    margin-top:0;
    padding:5px 10px 10px 10px;
    border:2px dotted #ddd;
    border-radius:3px;
}
.demo-ctl p .next-btn{
    margin-top:5px;
    vertical-align: middle;
}

级联选择

使用Select构建级联选择框.

Select 选择器 - 图9

查看源码在线预览

import { Select } from "@icedesign/base";

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      disabled: true
    };
  }
  render() {
    return (
      <div className="demo-ctl">
        <Select
          placeholder="选择省份"
          dataSource={provinceData}
          value={this.state.province}
          onChange={this.onSelect.bind(this)}
        />
        <Select
          placeholder="选择城市"
          dataSource={this.state.data}
          value={this.state.city}
          onChange={this.onChange.bind(this)}
          disabled={this.state.disabled}
        />
      </div>
    );
  }
  onSelect(value) {
    const data = cityData[value];
    this.setState({ data, province: value, disabled: false });
  }
  onChange(value) {
    this.setState({ city: value });
    console.log(this.state.province, value);
  }
}
ReactDOM.render(<App />, mountNode);


.next-select{margin-right:10px;}
.demo-ctl {
  background-color: #f6f6f6;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.demo-ctl p {
    margin-top:0;
}

分组

使用OptionGroup针对选项进行分组

Select 选择器 - 图10

查看源码在线预览

import { Select } from "@icedesign/base";

const { Option, OptionGroup } = Select;

const dataSource = [
  {
    label: "文案1",
    children: [
      {
        label: "文案11",
        value: "text11"
      }
    ]
  },
  {
    label: "文案2",
    children: [
      {
        label: "文案22",
        value: "text22"
      }
    ]
  }
];

ReactDOM.render(
  <div className="demo-ctl">
    <Select placeholder="选择尺寸" showSearch>
      <OptionGroup label="尺寸1">
        <Option value="small">Small</Option>
        <Option value="medium">Medium</Option>
        <Option value="large">Large</Option>
      </OptionGroup>
      <OptionGroup label="尺寸2">
        <Option value="small2">Small2</Option>
        <Option value="medium2">Medium2</Option>
        <Option value="large2">Large2</Option>
      </OptionGroup>
    </Select>
    <Select dataSource={dataSource} />
  </div>,
  mountNode
);


.next-select{margin-right:10px;}
.demo-ctl {
  background-color: #f6f6f6;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

搜索框

使用showSearch显示搜索框

Select 选择器 - 图11

查看源码在线预览

import { Select } from "@icedesign/base";
import jsonp from "jsonp";

class App extends React.Component {
  state = {
    dataSource: []
  };

  render() {
    return (
      <div className="demo-ctl">
        <Select
          showSearch
          dataSource={this.state.dataSource}
          onSearch={this.onSearch}
          filterLocal={false}
          className="temp"
        />
      </div>
    );
  }

  onSearch = value => {
    if (this.searchTimeout) {
      clearTimeout(this.searchTimeout);
    }
    this.searchTimeout = setTimeout(() => {
      jsonp(
        `https://suggest.taobao.com/sug?code=utf-8&q=${value}`,
        (err, data) => {
          const dataSource = data.result.map(item => {
            return {
              label: item[0],
              value: item[1]
            };
          });
          this.setState({
            dataSource
          });
        }
      );
    }, 100);
  };
}

ReactDOM.render(<App />, mountNode);


.next-select.temp{
    margin-right:10px;
    width:200px;
}
.demo-ctl {
  background-color: #f6f6f6;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

相关区块

Select 选择器 - 图12

暂无相关区块