ReactJs实现带switch开关按钮的数据选中取消的面板组件

typePanel.js文件

/**
 * Created by Administrator on 2017/3/27 0027.
 */
import React ,{Component} from "react"
import "./typePanel.less"
export default class TypePanel extends Component{
    constructor(props){
        super(props);
        this.state={
            typeData:{
                "typeId":"01",
                "typeName":"用户类型",
                "items":[
                    {"id":"0001","name":"公众"},
                    {"id":"0002","name":"集客"},
                    {"id":"0003","name":"营业渠道"},
                    {"id":"0004","name":"社会渠道"},
                    {"id":"0005","name":"电子渠道"},
                    {"id":"0006","name":"集团渠道"},
                    {"id":"0007","name":" 无渠道"}
                ]
            }
        }
    }
    handleSwitch=(typeId,event)=>{
        var target=event.currentTarget;
        if(target.src.indexOf("switch-off")!=-1){
            target.src="/src/typePanel/images/switch-on.png";
            this.switchAllItemsCheckBox(true);
        }
        else if(target.src.indexOf("switch-on")!=-1){
            target.src="/src/typePanel/images/switch-off.png";
            this.switchAllItemsCheckBox(false);
        }
    }
    switchAllItemsCheckBox=(isCheck)=>{
        debugger;
        var itemsContent=this.refs.typeContent;
        $(itemsContent).find("input:checkbox").each(function() {
            $(this)[0].checked=isCheck;
        });
    }
    render=()=>{
        var typeData=this.state.typeData;
        var typeName=typeData.typeName;
        var typeItems=typeData.items;
        var typeId=typeData.typeId;
        if(typeItems.length>0){
            var typeList=typeItems.map((item,index)=>{
                return(
                    <div key={index} className="type-panel-item">
                        <span className="type-panel-item-name">{item.name}</span>
                        <input className="type-panel-item-checkbox" type="checkbox"/>
                    </div>
                );
            });
        }
        return(
            <div className="type-panel-box">
                <div className="type-panel-title">
                    <span>{typeName}</span>
                    <img className="type-panel-switch-icon" src="/src/typePanel/images/switch-off.png" onClick={this.handleSwitch.bind(this,typeId)}/>
                </div>
                <div className="type-panel-content" ref="typeContent">
                    {typeList}
                </div>
            </div>
        );
    }
}

typePanel.less文件

.type-panel-box{
  width: 250px;
  height: auto;
}
.type-panel-title{
  width: 250px;
  height: 26px;
  background-color: #EDF2F6;
  border-top: solid 1px #cfcfcf;
  border-left: solid 1px #cfcfcf;
  border-right: solid 1px #cfcfcf;
  padding-left: 15px;
  padding-right: 15px;
  color: #666666;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  line-height: 26px;
}
.type-panel-content{
  width: 250px;
  height: auto;
  background-color: #F7F7F7;
  border: solid 1px #cfcfcf;
  padding-left: 15px;
  padding-right: 15px;
}
.type-panel-switch-icon{
  width: 30px;
  height: 20px;
  float: right;
  cursor: pointer;
}
.type-panel-item{
  height: 22px;
  line-height: 22px;
}
.type-panel-item-name{
  font-family: "Microsoft YaHei";
  font-size: 14px;
  color:#999999;
}
.type-panel-item-checkbox{
  float: right;
}

运行效果：

开关按钮开启时：