var FatherControl = React.createClass({
getInitialState:function(){
return{
isStop:false,
isNum:1
};
},
onChildChanged:function(newState){
this.setState({
isStop:newState
});
var dd;
this.timer = setInterval(()=>{
var eeNum = this.state.isNum;
this.setState({isNum:eeNum+1});
if(!this.state.isStop){
console.log('this is stop');
console.log(this.timer); //这里可以取到这个timer的
clearInterval(this.timer);
this.timer = undefined;
}
},1000);
},
componentWillUnMount:function(){ //这个测试用的,可以忽略
clearInterval(this.timer)
},
numberAdd:function(){ //这个也是测试用的,也可以忽略
var ee=0
ee = setInterval(function(){
var eeNum = this.state.isNum;
this.setState({isNum:eeNum+1})
}.bind(this),1000);
return function(){
this.ee;
}
},
render:function(){
return (
)
}
})
var MyButton = React.createClass({
getInitialState:function(){
return {
isStop:this.props.onclick
};
},
funClick:function(){
var newState = !this.state.isStop;
this.setState({
isStop:newState
});
this.props.callbackParent(newState);
},
render:function(){
var checked = this.state.checked;
return(
)
}
})
var ImgPanel = React.createClass({
render:function(){
return(
{this.props.showvalue}
)
}
});
ReactDOM.render(
document.getElementById('example')
);
现在在练习react组件部分的交互,FatherControl是父组件,MyButton和ImgPanel是子组件,ImgPanel是一个计数的功能,点击MyButton时候可以启动或者停止。刚开始练习,用的是旧版本的React...