<!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度，显示水烧开了
其余显示正在加热中*/
/*定义一个函数用来判断返回结果*/
function show(now,max,min){
var now = Number(now);
var max = Number(max);
var min = Number(min);
if(now>max){
return '水烧开了！';
}else if(now<min){
return '水结冰了！';
}else{
return '正在加热中！';
}
}
class Cwater 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)}/>
<h3>{show(this.state.wd,this.props.max,this.props.min)}</h3>
</div>
);
}
}
ReactDOM.render(
<Cwater max='80' min='0'/>,
document.getElementById('example')
);
</script>
</body>
</html>react小demo----烧水（函数与jsx结合）
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/80720956
今日推荐
周排行