#tnt-select

react select组件

#Development

npm i && npm test

#Usage

var TntSelect = require('tnt-select');
var React = require('react');  
var ReactDOM = require('react-dom');   

class App extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            defaultData : [["英雄联盟","穿越火线","战地之王","王者荣耀","火影忍者","传奇","剑侠情缘","天龙八部","守望先锋","其他"]],
            defaultValue : [],
            value : ""
        };
        this.onClick = this.onClick.bind(this);
        this.onSelect = this.onSelect.bind(this);
    }
    onSelect(opt){
        let _res = [];
        opt.forEach(function(val){
            _res.push(val.value)
        });
        this.setState({
            defaultValue : _res,
            value : _res.join(' ')
        });

    }
    onClick(){
        this.refs.slectPro.show();
    }
    render(){
        const { onClick  , onSelect } = this;
        const { defaultValue , defaultData, value } = this.state;
        return (
            <div>
                <input 
                    type="text"
                    onClick={onClick}
                    value={value}
                    readOnly
                />
                <TntSelect 
                    ref="slectPro"
                    theme="dark"
                    onSelect={onSelect}
                    defaultData={defaultData} 
                    defaultValues={defaultValue}
                  />
            </div>
            
        )
    }
}

ReactDOM.render(
    <App />

, document.getElementById('app'));

#API

##props

| name          | type       | default         | description          |
| defaultData   | array      | []              | 列表数据             |
| defaultValues | array      | []              | 默认值               |
| style         | object     | {}              | 组件容器样式         |
| prefixCls     | string     | tnt-switch      | 样式前缀用于重写样式 |
| buttons       | array      | ["确定","取消"] | 按钮文字             |
| theme         | string     | default         | 主题:ios/dark可选    |
| isOpen        | bool       | false           | 初始化是否展示       |
| onChange      | function() |                 | 滑动之后的事件       |
| onClose       | function() |                 | 点击取消事件         |
| onSelect      | function() |                 | 点击确定事件         |

onChange (val:string,index:number,key:number){
    val : 被改变项的值
    index : 被改变项值的索引
    key : 被改变项在组件的索引
}  

onSelect(opt:array){
    opt[i].value //选择的值
    opt[i].key  //值的索引
}

#example

git clone https://github.com/Genie77998/tnt-select.git

npm i && npm run dev 

open http://localhost:12315