@beisen/dropdown-list/story/index.js

DropDownList

import React, {Component, PropTypes} from 'react'
import {render} from 'react-dom'

import DropDownList from '../lib/index';

class Demo extends Component{

    constructor(props) {
     super(props)
      let self = this;
        this.state = {
            "title":"测试"  //input框前的文字标识，可为空
            ,"placeholder":"搜索"              /**没有值的时候显示的内容(string)**/
            ,"defaultValue":""  //默认值
            ,"openListView":false    
            ,"errorStatus": false
            ,"errorMsg":"出错了~~~！"
            ,multiple: true //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
            ,"children":[
                {
                    "value":0
                    ,"text":"查看详情"
                    ,"isActive":false
                    ,"isChecked":true
                }  
                ,{
                    "value":1
                    ,"text":"性质维度"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":2
                    ,"text":"地域维度"
                    ,"isActive":false
                    ,"isChecked":true
                } 
                ,{
                    "value":3
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } 
                ,{
                    "value":4
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                },{
                    "value":5
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":6
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":7
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":8
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":9
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":10
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                } ,{
                    "value":11
                    ,"text":"包含下属"
                    ,"isActive":false
                    ,"isChecked":false
                }  
            ]               /** MenuItem **/
            ,"hidden":false  //是否显示\
            ,"disabled":false //是否禁用
            ,"readonly":false
            ,"required":true  //是否显示必选星号
            ,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
            ,"onClick":function(event, target, val){console.log(val.value)} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
            ,"onBlur":function(event, val){console.log(val)} /**失去焦点后事件回调event：val：input抛出的值**/
            ,"onChange":function(event, target, val){console.log(event);console.log(target);console.log(val);} /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
            ,"onFocus":function(event, val){console.log(val)} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
        }
    }
    test(){
        let test = this.state.children;
        test.map((item)=>{
            item.isChecked = false;
        })
        this.setState({"children":test})
    }
    render () {
       return (
       		<div>
                <DropDownList {...this.state} />

                <div style={{"margin":"550px 0 0 0 "}}>
                    <DropDownList {...this.state} />
                </div>
                <button onClick={::this.test}>test</button>
            </div>
        )
    }
}
export default Demo;