Select 选择器

API#

Select#

属性	说明	类型	默认值
size	`small`,`medium`(default),`large`	String	medium
shape	`normal`,`arrow-only`	String	normal
placeholder	没有值的时候的占位符	String	`Please Select`
value	当前值	String,Array,Number	null
defaultValue	初始默认值	String,Array,Number	null
visible	当前弹层是否显示	Boolean	false
defaultVisible	弹层初始是否显示	Boolean	false
disabled	是否禁用	Boolean	false
dataSource	传入的数据，可以动态渲染子项,详见dataSource	Array	null
multiple	是否是多选	Boolean	false
fillProps	填充到选择框里面的值	String	`label`
showSearch	是否显示顶部的搜索框	Boolean	false
filterBy	在输入的时候过滤的函数,仅在filterLocal为true时候有效	Function(filterValue, item):Boolean	filterBy
filterLocal	是否使用本地过滤,在数据源为远程的时候需要关闭此选项	Boolean	true
hasArrow	是否显示右侧的箭头	Boolean	true
autoWidth	下拉菜单是否与选择器对齐	Boolean	true
onChange	Select发生改变的时候触发的回调	Function(value, data)	noop
onSearch	在搜索框中输入触发的事件，仅在showSearch为true时候有效	Function(value)	noop

Select.OptionGroup#

属性	说明	类型	默认值
label	设置分组的文案	String, ReactElement	''

Select.Combobox#

属性	说明	类型	默认值
size	`small`,`medium`(default),`large`	String	medium
shape	`normal`,`arrow-only`	String	normal
placeholder	没有值的时候的占位符	String	`Please input`
value	当前值	String,Array,Number	null
defaultValue	初始默认值	String,Array,Number	null
visible	当前弹层是否显示	Boolean	false
defaultVisible	弹层初始是否显示	Boolean	false
disabled	是否禁用	Boolean	false
dataSource	传入的数据，可以动态渲染子项, 详见dataSource	Array	null
multiple	是否是多选	Boolean	false
tags	是否启用标签模式, 仅在多选时有效,效果是除了自动提示外的选项, 也可以使用输入的文字作为标签	Boolean	false
fillProps	填充到选择框里面的值	String	`value`
hasArrow	是否显示右侧的箭头	Boolean	true
autoWidth	下拉菜单是否与选择器对齐	Boolean	true
hiddenSelected	选择后是否立即隐藏菜单，单选是默认隐藏的，因此该选项只在多选的时候有效	Boolean	false
filterBy	在输入的时候过滤的函数,仅在filterLocal为true时候有效	Function(filterValue, item):Boolean	filterBy
filterLocal	是否使用本地过滤,在数据源为远程的时候需要关闭此选项	Boolean	true
onChange	Combobox发生改变的时候触发的回调, 注意在输入的时候该事件不会被触发，如果需要监听输入的事件请使用`onInputUpdate`	Function(value, item)	noop
onInputUpdate	Combobox在用户输入的时候触发的回调	Function(value)	noop
onInputFocus	Combobox获取焦点的时候触发的回调	Function(e, clickByUser:Boolean)	noop
onInputBlur	Combobox失去焦点的时候触发的回调	Function(e)	noop
onInputEnter	Combobox回车的时候触发的回调	Function(e)	noop

dataSource#

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

children的方式

<Select>
    <Select.Option value="option1">option1</Select.Option>
    <Select.Option value="option2">option2</Select.Option>
    <Select.Option disabled>disabled</Select.Option>
</Select>

props的方式

const dataSource = [
    {label:'option1', value:'option1},
    {label:'option2', value:'option2'},
    {label:'disabled', disabled:true}
]
<Select dataSource={dataSource}/>
`

ARIA and KeyBoard.#

Select#

按键	说明
tab	在可以被聚焦的select之间导航
enter: select	弹出下拉菜单
upArrow	向上导航到一个MenuItem
downArrow	向下导航到一个MenuItem
enter: menuItem	选中当前的MenuItem

Select.Combobox#

按键	说明
tab	在可以被聚焦的combobox之间导航
enter	选中当前的MenuItem
upArrow	向上导航到一个MenuItem
downArrow	向下导航到一个MenuItem

代码演示

import Select, {Option} from 'blue/lib/select';
import Button from 'blue/lib/button';
import 'blue/lib/select/index.scss';
import 'blue/lib/button/index.scss';

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            value : 'small'
        };
    }

    render() {
        return (
            <Select placeholder="选择尺寸" onChange={this.onSelect.bind(this)} value={this.state.value}>
                <Option value="small">Small</Option>
                <Option value="medium">Medium</Option>
                <Option value="large">Large</Option>
            </Select>
        );
    }
    onSelect(value){
        this.setState({
            value
        });
    }
}
ReactDOM.render(<App/>, mountNode);

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

基本使用

演示了Select的control功能

import Select from 'blue/lib/select';
import 'blue/lib/select/index.scss';

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

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          data: [],
          disabled: true
        };
    }
    render(){
        return (<span>
                <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}/>
                </span>)
    }
    onSelect(value){
        let 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;}

级联选择

使用Select构建级联选择框.

import Select, {Option, OptionGroup} from 'blue/lib/select';
import Button from 'blue/lib/button';
import 'blue/lib/select/index.scss';
import jsonp from 'jsonp';

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

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

    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;
}

显示搜索框

使用showSearch显示搜索框

import Select, {Combobox} from 'blue/lib/select';
import 'blue/lib/select/index.scss';
import Button from 'blue/lib/button';
import 'blue/lib/button/index.scss';
import jsonp from 'jsonp';
import Icon from 'blue/lib/icon';

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

class App extends React.Component{

    state = {
        dataSource: []
    }

    render() {
        return (
                <Combobox onInputUpdate={this.onInputUpdate.bind(this)}
                          filterLocal={false}
                          fillProps = 'label'
                          placeholder = '请输入淘宝商品'
                          onChange = {onChange}
                          dataSource = {this.state.dataSource}/>
        );
    }
    onInputUpdate(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{
    margin-right:10px;
    vertical-align: middle;
}

Combobox动态数据

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

import Select, {Combobox} from 'blue/lib/select';
import 'blue/lib/select/index.scss';
import Button from 'blue/lib/button';
import 'blue/lib/button/index.scss';
import jsonp from 'jsonp';
import Icon from 'blue/lib/icon';

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

const formatter = function(item){
    return <div><Icon type="gifts" size="small"/>&nbsp;{item}</div>
}

class App extends React.Component{

    state = {
        dataSource: []
    }
    // 由于这个时候展示的是富文本，所以fillProps需要设置成展示合理的值(originLabel)
    render() {
        return (
                <Combobox onInputUpdate={this.onInputUpdate.bind(this)}
                          filterLocal={false}
                          fillProps = 'originLabel'
                          placeholder = '请输入淘宝商品'
                          onChange = {onChange}
                          dataSource = {this.state.dataSource}/>
        );
    }
    onInputUpdate(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: formatter(item[0]),
                        value: item[1],
                        originLabel: item[0]
                    }
                });
                this.setState({
                    dataSource
                })
            });
        },100);
    }
}
ReactDOM.render(<App/>, mountNode);

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

Combobox图文展示

展示较为复杂的内容

import {Combobox} from 'blue/lib/select';
import 'blue/lib/select/index.scss';
import Button from 'blue/lib/button';
import 'blue/lib/button/index.scss';

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            dataSource: [{
                value:'测试',
                label:'测试',
                time: 123
            }],
            value: '测试',
            visible: false
        }
    }
    render(){
        return (
            <div>
                <p>
                    <Button onClick={this.toggleTags.bind(this)}>切换tags模式</Button>&nbsp;
                    <Button onClick={this.toggleHiddenSelect.bind(this)}>切换在多选的时候是否隐藏菜单</Button>&nbsp;
                    <Button onClick={this.toggleVisible.bind(this)} ref="visibleElement">切换显示</Button>&nbsp;
                </p>
                <Combobox size="large"
                    value = {this.state.value}
                    dataSource={this.state.dataSource}
                    onChange={this.onChange.bind(this)}
                    onInputUpdate ={this.onInputUpdate.bind(this)}
                    multiple
                    tags = {this.state.tags}
                    filterLocal = {false}
                    safeNode = {() => this.refs.visibleElement}
                    visible = {this.state.visible}
                    onVisibleChange = {this.onVisibleChange.bind(this)}
                    hiddenSelected = {this.state.hiddenSelected}
                    />
            </div>
        )
    }
    onInputUpdate(value){
        let options;
        if(!value || value.indexOf('@') > 0){
            options = [];
        }else{
            options = ['126.com','163.com','gmail.com'].map(mail => {
                return {
                    label: value + '@'+ mail,
                    value: value + '@'+ mail,
                    time: Math.random()
                }
            });
        }
        this.setState({dataSource: options});
    }

    onChange(value, item){
        this.setState({value});
        console.log(item);
    }
    toggleTags(){
        this.setState({tags: !this.state.tags});
    }
    toggleHiddenSelect(){
       this.setState({hiddenSelected: !this.state.hiddenSelected});
    }
    toggleVisible(){
        this.setState({visible: !this.state.visible});
    }
    onVisibleChange(visible){
        this.setState({visible});
    }

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

tags

演示combobox的tags功能

import Select, {Option} from 'blue/lib/select';
import Button from 'blue/lib/button';
import 'blue/lib/select/index.scss';
import 'blue/lib/button/index.scss';

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

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>
                <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>
                    <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}
                    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':
                this.setState({
                    [type]: value == 'yes'
                })
            break;
            default:
                this.setState({
                    [type]: value
                })
        }
    }
}
ReactDOM.render(<App/>, mountNode);

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

基本使用

演示了Select的多种形态.

import Select, {Option, OptionGroup} from 'blue/lib/select';
import Button from 'blue/lib/button';
import 'blue/lib/select/index.scss';

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

ReactDOM.render(<div><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}></Select></div>, mountNode);

.next-select{margin-right:10px;}

分组

使用OptionGroup针对选项进行分组

import Select, {Combobox} from 'blue/lib/select';
import 'blue/lib/select/index.scss';
import Button from 'blue/lib/button';
import 'blue/lib/button/index.scss';

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

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>
                <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,'hasArrow')}>
                        <Option value="yes">常规</Option>
                        <Option value="no">无下拉箭头</Option>
                    </Select>
                    <Select placeholder="填充属性" onChange={this.onSelect.bind(this,'fillProps')}>
                        <Option value="value">value</Option>
                        <Option value="label">label</Option>
                    </Select>
                    <Button onClick={this.onToggle.bind(this)} type="primary">Toggle disabled</Button>
                </p>
                <h4>效果预览</h4>
                <Combobox
                    size={this.state.size}
                    multiple={this.state.mode}
                    hasArrow={this.state.hasArrow}
                    disabled={this.state.disabled}
                    fillProps={this.state.fillProps}
                    onChange={onChange}
                    onInputUpdate={this.onInputUpdate.bind(this)}
                >   
                    <Option value="">空</Option>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="andy">Andy</Option>
                    <Option value="disabled" disabled>Disabled</Option>
                </Combobox>
            </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':
                this.setState({
                    [type]: value == 'yes'
                })
            break;
            default:
                this.setState({
                    [type]: value
                })
        }
    }
    onInputUpdate(value){
        console.log(value);
    }
}
ReactDOM.render(<App/>, mountNode);

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

Combobox基本

演示了Combobox的多种形态.

import Select, {Combobox} from 'blue/lib/select';
import 'blue/lib/select/index.scss';
import Button from 'blue/lib/button';
import 'blue/lib/button/index.scss';
import jsonp from 'jsonp';
import Icon from 'blue/lib/icon';


class App extends React.Component{

    state = {
        dataSource: [],
        value: 'test'
    }
    render() {
        return (
                <Combobox onInputUpdate={this.onInputUpdate.bind(this)}
                          filterLocal={false}
                          value = {this.state.value}
                          fillProps = 'label'
                          placeholder = '请输入淘宝商品'
                          onChange = {this.onChange.bind(this)}
                          dataSource = {this.state.dataSource}/>
        );
    }

    onInputUpdate(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);
        //单选情况下需要更新input的值
        this.setState({
            value
        })
    }
    onChange(value){
        this.setState({
            value
        })
    }
}
ReactDOM.render(<App/>, mountNode);

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

Combobox受控

演示Combobox的受控状态

import Select, {Combobox} from 'blue/lib/select';
import 'blue/lib/select/index.scss';
import Button from 'blue/lib/button';
import 'blue/lib/button/index.scss';
import jsonp from 'jsonp';
import Icon from 'blue/lib/icon';


class App extends React.Component{

    state = {
        dataSource: [],
        value: 'test'
    }
    render() {
        return (
                <Combobox onInputUpdate={this.onInputUpdate.bind(this)}
                          filterLocal={false}
                          value = {this.state.value}
                          fillProps = 'label'
                          multiple 
                          placeholder = '请输入淘宝商品'
                          onChange = {this.onChange.bind(this)}
                          dataSource = {this.state.dataSource}/>
        );
    }
    //多选情况下不需要更新input的值
    onInputUpdate(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);
    }
    onChange(value){
        this.setState({
            value
        })
    }
}
ReactDOM.render(<App/>, mountNode);

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

Combobox受控

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