最近学习react,写了一个类目选择组件练练手。
注:1.this.state 和 this.setState的区别是前者改变状态值不引发render行为,后者相反。
2.父组件传值到自组件,子组件用props属性接收,props可以是父组件函数,经过子组件调用改变父组件状态
3.componetWillReceiveProps: 此生命周期发生在父组件props值改变,子组件可以在此时根据props改变组件内部state状态,this.props获得之前的状态,nextProps获得新的props
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Example</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> <div id="show"></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 }, 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(); } } }, render:function(){ var o=this.props.obj; var dlindex=this.props.dlindex; this.state.childCheckboxNum=o.items.length; var dd=o.items.map(function(i,ddindex){ return( <dd key={'dd_'+dlindex+'_'+ddindex}> <GoodsCheckbox dlcheck={this.state.check} ifuncheckall={this.state.ifuncheckall} childAffectFather={this.childAffectFather} />{i} </dd> ) }.bind(this)); return ( <dl> <dt><input onChange={this.selectAll} type="checkbox" checked={this.state.check}/>{o.type}</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({ render:function(){ var data=this.props.list; var list=data.map(function(o,dlindex){ return <GoodsDl key={dlindex} obj={o} dlindex={dlindex} /> }); return <div>{list}</div> } }); ReactDOM.render( <GoodsClassify list={data}/>, document.getElementById('GoodsClassify') ); </script> </body> </html>