react父子组件通信

父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。

class TemperatureShow extends React.Component {
   constructor(props) {
       super(props);
   }
   render() {
       let t = this.props.temperature;
       if(t > 38) {
           return <p>hot</p>;
       }else if(t <= 38 && t >= 20) {
           return <p>cool</p>;
       }else {
           return <p>cold</p>;
       }
   }
}



class TemperatureInput extends React.Component {
   constructor(props) {
       super(props);
       // this.handleTemp=this.handleTemp.bind(this);
   }
   handleTemp(e) {
       this.props.onTemperatureChange(e.target.value);
   }
   render() {
       return (
           <p>
               <label htmlFor="temInput">今天的温度</label>
               <input type="text" name="temInput" value={this.props.temperature} onChange={this.handleTemp.bind(this)}/>
           </p>
       );
   }
}

class TemContainer extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           temperature: '',
       };
       this.handleTemp = this.handleTemp.bind(this);
   }
   handleTemp(temperature) {
       this.setState({
           temperature: temperature,
       });
   }
   render() {
       let temperature = this.state.temperature;
       return (
           <div>
               <TemperatureInput temperature={temperature} onTemperatureChange={this.handleTemp}></TemperatureInput>
               <TemperatureShow temperature={parseFloat(temperature)}></TemperatureShow>
           </div>
       );
   }
}

ReactDOM.render(
   <TemContainer/>,
   document.getElementById('root'),
);