<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React2!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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 (
<div>
<ImgPanel showvalue={this.state.isNum}></ImgPanel>
<MyButton callbackParent={this.onChildChanged}>Start</MyButton>
</div>
)
}
})
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(
<button onClick={this.funClick}>Start</button>
)
}
})
var ImgPanel = React.createClass({
render:function(){
return(
<h3>{this.props.showvalue}</h3>
)
}
});
ReactDOM.render(
<FatherControl/>,
document.getElementById('example')
);
</script>
</body>
</html>
现在在练习react组件部分的交互，FatherControl是父组件，MyButton和ImgPanel是子组件，ImgPanel是一个计数的功能，点击MyButton时候可以启动或者停止。刚开始练习，用的是旧版本的React...
Caballarii
慕的地6079101
lmc_study
lmc_study
相关分类