React－组件之间的通信

在开发过程中，经常会遇到父组件和子组件之间相互通信，React子组件和父组件通信包括以下几个方面：

1，子组件调用父组件的方法
（1）子组件要拿到父组件的属性，需要通过 this.props 方法。
（2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。

2，父组件调用子组件的方法
在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样，子组件被设置为 ref 之后（比如 ref="xxx"）。父组件便可以通过 this.refs.xxx 来获取到子组件了。

子组件向父组件传值
例子1:这里如下图，用户邮箱为父，绿色框为子。 父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”，这两个名称随
意起；再将函数以props的形式传到子组件，子组件只需在事件发生时，调用父组件传过来的函数即可。
效果图

image.png

//  子类 - Child
import React from 'react';

export default class Child extends React.Component {

  render() {
    return (
      

        请输入邮箱：
      
    );
  }
}

// 父类 - Parent
import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: ' '
    }
  }

  handleEmail = (event) => {
    this.setState({
      email: event.target.value
    });
  }

  render() {
    return (
      

        
用户邮箱：{this.state.email}
        
      
    );
  }
}

例子2:有时候往往需要对数据做处理，再传给父组件，比如过滤或者自动补全等等，下面的例子对用户输入的邮箱做简单验证，自动过滤非数字、字母和"@."以外的字符。
效果图

image.png

//  子类 - Child
import React from 'react';

export default class Child extends React.Component {

  handleVal = () => {
    var val = this.refs.emailDom.value;
    val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
    this.props.handleEmail(val);
  }

  render() {
    return (
      

        请输入邮箱：
      
    );
  }
}
// 父类 - Parent
import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: 'ddd'
    }
  }

  handleEmail = (value) => {
    this.setState({
      email: value
    });
  }

  render() {
    return (
      

        
用户邮箱：{this.state.email}
        
      
    );
  }
}

例子3:如果还存在孙子组件的情况呢？如下图，黑框为父，绿框为子，红框为孙，要求子孙的数据都传给爷爷。原理一样的，只是父要将爷爷对孙子的处理函数直接传下去。
效果图

image.png

import React from 'react';
class Grandson extends React.Component {
  render() {
    return (
      
性别：
        
          男
          女
        
      
    );
  }
}

export default class Child extends React.Component {

  render() {
    return (
      

        姓名：
        
      
    );
  }
}

import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      sex: ''
    }
  }

  handleVal = (event) => {
    this.setState({
      username: event.target.value
    });
  }

  handleSelect = (event) => {
    this.setState({
      sex: event.target.value
    });
  }

  render() {

    return (
      

        
用户姓名：{this.state.username}
        
用户性别：{this.state.sex}
        
      
    );
  }
}

父类调用子类的函数和属性

// 子类
import React from 'react';

export default class ButtonComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  sendSword = () => {
    var newCount = this.state.count + 1;
    this.setState({
      count: this.state.count + 1
    });
    this.props.getSwordCount();
  }

  render() {
    return (
      {this.props.buttonName}
    );
  }
}
// 父类
import ButtonComment from './ButtonComment';
import React from 'react';

export default class ImDaddyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sendCount: 0
    }
  }


  getSwordCount = () => {
    this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
  }

  sendSword = () => {
    this.refs.getSwordButton.sendSword();
  }

  render() {
    return (
      

        
        通过老爸送宝刀
        

          父子俩共送{this.state.sendCount}把宝刀！！！
        
      
    );
  }
}

效果图

Snip20171012_1.png

Snip20171012_2.png