react父子通讯

react 父子组件通信

react父子组件通信是通过props来完成的，下面是一个小小的demo案例
下面的案例通过输入框完成双向绑定的组件通信，完成了父传子，子传父的操作

父组件
把父组件的temperature和handleTemp以props的方式传给子组件

import Son from "./Son"
class Father extends Component {
  constructor(props) {
    super(props);
    this.state = {
      temperature: "111"
    };
    // 绑定this
    this.handleTemp = this.handleTemp.bind(this);
  }
  // 父组件的方法  
  handleTemp(temperature) {
    this.setState({
      temperature: temperature
    });
  }
  render() {
    const { temperature } = this.state;
    return (
      <div>
          <div>{temperature}</div>
           <Son
            temperature={temperature}
            onTemperateChange={this.handleTemp}
          />
      </div>
    );
  }
}

export default Father ;

子组件
接收父子组件的props,在reader里边可打印查看this.props

class Son extends Component {
  constructor(props) {
    super(props);
    this.handleTemp = this.handleTemp.bind(this);
  }
  handleTemp(e) {
    // 接受父组件传递过来的函数，调用并传值给父组件
    this.props.onTemperateChange(e.target.value);
  }
  render() {
	// 此处可以查看props
	console.log(this.props)
    return (
      <div className="header">
        <input type="text" onChange={this.handleTemp} />
      </div>
    );
  }
}

export default Son;