持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情。

今天主要学习的是react中子父组件之间的通信。 React子组件和父组件通信包括以下几个方面：

1. 子组件获取父组件属性：props或者state
2. 子组件调用父组件的方法
3. 父组件获取子组件的属性：props或者state
4. 父组件调用子组件的方法

子组件向父组件传值

react里子组件不能直接操作父组件的数据。 所以要从父组件传递一个方法给子组件， 子组件获取到该方法后，把子数据传入该方法， 父组件才能获取到子数据。 总的来说，在react中子组件向父组件传值的逻辑和vue是差不多的，只不过写法有写出入。

举个简单的例子：

定义一个子组件，在子组件中定义一个点击事件绑定this，通过this.props获取到整个组件，传入参数，sendParams是自定义的方法：

// 子组件header.js
import React, { Component } from "react";
class HeaderComponent extends Component {
  render() {
    return (
      <div id="headerText">
        子组件传值页面
        <br></br>
        <button
          type="button"
          onClick={this.props.sendParams.bind(this, "我是子组件页面")}
        >
          点击传值
        </button>
      </div>
    );
  }
}
export default HeaderComponent;

在父组件中引入子组件，使用刚刚定义的sendParams方法获取传过来的参数，定义getChild方法通过绑定bind进行传值：

// 父组件App.js
import React from "react";
import Header from "./components/header";
class App extends React.Component {
  getChild(val) {
    console.log(val);
  }
  render() {
    return (
      <div className="App">
        <Header sendParams={this.getChild.bind(this)}></Header>
      </div>
    );
  }
}
export default App;

子组件向父组件传递方法

举例说明：

定义一个子组件，定义方法onClick在点击按钮时候触发保存：

// 子组件中
 <button  type="button" 
 onClick={this.props.onClick.bind(this)}>
   点击保存
</button>

在父组件中，定义onClick方法触发父组件中保存方法submitSave

// 父组件
  submitSave() {
    console.log("保存");
  }
  render() {
    return (
      <div className="App">
        <Header
          onClick={this.submitSave.bind(this)}
        ></Header>
      </div>
    );
  }

子父组件的双向绑定

举例说明：

定义一个子组件input，在输入的时候传递方法onChange：

// input.js
import React, { Component } from "react";

export default class InputComponent extends Component {
  render() {
    return (
      <div>
        <input onChange={this.props.onChange}></input>
      </div>
    );
  }
}

在父组件中引用，拿到input的值进行赋值：

import React from "react";
import Input from "./components/input";
class App extends React.Component {
  // 构造方法创建组件时候被调用
  constructor() {
    super();
    this.state = {
      text: "",
    };
  }
  render() {
    return (
      <div className="App">
        <Input
          onChange={(e) => {
            this.setState({ text: e.target.value });
          }}
        ></Input>
        {this.state.text}
      </div>
    );
  }
}
export default App;

初学react，组件之间的弯弯绕绕，还是说的不够明白，有问题可以一起交流，接下来继续学习react相关知识点~