React:状态提升案例-烧开水

1.定义Boilingverdict组件

function Boilingverdict(props){
   
    if(props.celsius>=100){
   
        return <h1>水烧开了</h1>
    }else{
   
        return <h1>水凉凉</h1>
    }
}
export default Boilingverdict

2.定义第一个输入框

import React from "react"
import Boilingverdict from "./Boilingverdict"
class Calculator extends React.Component{
   
    constructor(){
   
        super()
        this.state={
   
            temperature:""
        }
    }
    inputChange(e){
   
        this.setState({
   
            temperature:e.target.value
        })
    }
    render(){
   
        return (
            <div>
                <fieldset>
                    <legend>input</legend>
                    <input type="text" onChange={
   this.inputChange.bind(this)}/>
                </fieldset>
                <Boilingverdict celsius={
   this.state.temperature}/>
            </div>
        )
    }
}
export default Calculator

3.定义第二个输入框

//Calculator.js
import React from "react"
import Boilingverdict from "./Boilingverdict"
import Temperatureinput from "./TemperatureInput"
class Calculator extends React.Component{
   
    constructor(){
   
        super()
        this.state={
   
            temperature:""
        }
    }
    render(){
   
        return