最近学习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>