综合概述:比较上一个例子,数据从实际接口获取的,首先调取接口获取一级类目,然后根据一级类目的id分别获取对应的二级类目
1.GoodsClassify 组件获取一级类目作为数据源初始化props,通过map循环组件<GoodsDl key={dlindex} obj={o} dlindex={dlindex} />,渲染出<dl><dt></dt></dl>列表,首次render之后,进入componentDidMount生命周期,获取实际dom节点的id,调用二级类目接口,将数组保存在ddArray中,再次渲染出二级类目。
2.componentDidMount仅在首次渲染后执行一次,之后不再执行,componentWillUpdate,首次渲染不执行,在之后状态更新后才执行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实际项目中React 类目选择组件</title> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <div id="GoodsClassify"></div> <script type="text/babel"> var data=[{type:'衣服类',items:['衣服一','衣服二','衣服三']},{type:'电器类',items:['电器一','电器二','电器三']}]; var GoodsDl=React.createClass({ getInitialState:function(){ return { check:false, //父的选中状态 childCheckboxNum:0,//父checkbox下子checkbox的数量 childBeChecked:0, //子checkbox被选中的数量 ifuncheckall:true, //childCheckboxNum==childBeChecked时 为true,表示父checkbox取消选择时可以取消所有子checkbox //父被取消另一种场景是子全选中时,取消某个子checkbox,父被取消,但其他子不必取消,此时为false ddArray:[] } }, selectAll:function(){ this.state.check=!this.state.check; this.setState({ check:this.state.check }) if(this.state.check){ this.state.childBeChecked=this.state.childCheckboxNum; this.state.ifuncheckall=true }else{ this.state.childBeChecked=0; } }, childAffectFather:function(flag){ if(!flag){ //子未被选中 this.setState({ check:false,//父取消选中 ifuncheckall:false// 父被动取消选中,其他子不被取消 }) this.state.childBeChecked-=1; }else{ this.state.childBeChecked+=1; if(this.state.childBeChecked==this.state.childCheckboxNum){ this.selectAll(); } } }, componentDidMount:function(){ //this.getDOMNode() or ReactDOM.findDOMNode(this)//初次渲染调用一次 var _this=$(ReactDOM.findDOMNode(this)); var dirId=_this.find('dt').attr("data-dirid"); var that=this; $.ajax({ url:"http://***/getThirdLevelCategoryList.html", type:"post", data:{firstLevelDirId:dirId}, dataType:"json", success:function(data){ that.setState({ ddArray:data.data, childCheckboxNum:data.data.length }) } }) }, componentWillUpdate:function(){//初次渲染不调用,状态更新时调用 var _this=$(ReactDOM.findDOMNode(this)); }, render:function(){ var o=this.props.obj; var dd=this.state.ddArray.map(function(i,j){ return ( <dd key={"dd_"+this.props.dlindex+"_"+j}> <label> <GoodsCheckbox dlcheck={this.state.check} ifuncheckall={this.state.ifuncheckall} childAffectFather={this.childAffectFather} addChecked={this.addChecked} subChecked={this.subChecked} />{i.dirName} </label> </dd> ) }.bind(this)); return ( <dl> <dt data-dirid={o.dirId}> <input onChange={this.selectAll} dlcheck={this.state.check} type="checkbox" checked={this.state.check} />{o.dirName} </dt> {dd} </dl> ) } }); var GoodsCheckbox=React.createClass({ getInitialState:function(){ return { check:false } }, componentWillReceiveProps:function(nextProps){ if(nextProps.dlcheck){ this.setState({ check:true }) } else{ if(nextProps.ifuncheckall){ this.setState({ check:false }) } } }, selectOne:function() { this.state.check=!this.state.check; this.setState({ check:this.state.check }) this.props.childAffectFather(this.state.check); }, render:function(){ return <input onChange={this.selectOne} type="checkbox" checked={this.state.check}/> } }); var GoodsClassify=React.createClass({ getDefaultProps:function(){ var dataList=[]; $.ajax({ url:"http://**/getFirstLevelCategoryList.html", type:"post", dataType:"json", async:false, success:function(data){ if(data.success){ dataList=data.data; }else{ //ui.alert(data.message,2000,false) } } }); return { dataList:dataList } }, render:function(){ var data=this.props.dataList; var list=data.map(function(o,dlindex){ return <GoodsDl key={dlindex} obj={o} dlindex={dlindex} /> }); return <div>{list}</div> } }); ReactDOM.render( <GoodsClassify />, document.getElementById('GoodsClassify') ); </script> </body> </html>