<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react--父子组件通信</title>
<script src='react.js'></script>
<script src='react-dom.js'></script>
<script src='babel.min.js'></script>
</head>
<body>
<div id='example'></div>
<script type='text/babel'>
/*利用父子组件通信写一个烧水的demo*/
/*需求:当小于0度,显示水结冰了
大于80度,显示水烧开了
其余显示正在加热中*/
/*定义一个子组件用来判断返回结果*/
class Cwater extends React.Component{
constructor(){
super();
/*初始化一个状态来存储返回信息*/
this.state = {
cmsg:''
}
}
/*组件挂载前进行初始化*/
componentWillMount(){
this.show(this.props.msg,this.props.max,this.props.min);
}
/*值更新是进行判断并显示*/
componentDidUpdate(){
this.show(this.props.msg,this.props.max,this.props.min);
}
show(now,max,min){
let Now = Number(now);
let Max = Number(max);
let Min = Number(min);
if(Now>Max){
this.setState({
cmsg:'水烧开了!'
});
}else if(Now<Min){
this.setState({
cmsg:'水结冰了!'
});
}else{
this.setState({
cmsg:'正在加热中!'
});
}
}
render(){
return (
<h3>{this.state.cmsg}</h3>
);
}
}
class Water extends React.Component{
constructor(){
super();
/*初始化一个状态来存储水的温度*/
this.state = {
wd:-2
}
}
change(e){
/*更新水温*/
this.setState({
wd:e.target.value
});
}
render(){
return (
<div>
<input type="number" defaultValue={this.state.wd} onChange={this.change.bind(this)}/>
<Cwater msg={this.state.wd} max='80' min='0'/>
</div>
)
}
}
ReactDOM.render(
<Water />,
document.getElementById('example')
);
</script>
</body>
</html>
react--烧水demo(利用组件传值实现)
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/80721225
今日推荐
周排行