ReactJs實現帶switch開關按鈕的資料選中取消的面板元件
阿新 • • 發佈:2019-01-24
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; }
開關按鈕開啟時: