react--烧水demo（利用组件传值实现）

<!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（利用组件传值实现）

猜你喜欢
