React（一）父子组件之间的通信

无论是React，还是Vue，父子组件之间的通信都是组件式开发至关重要的一部分。备注一下基础要点。

1、父组件向子组件传值

  父组件向子组件传值是在调用子组件的时候通过参数传递给子组件

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'

export default class Communicate extends Component{
  constructor(props){
    super(props)
    this.fartherProps = '我是父组件的值，子组件需要我'
  }
  render(){
    let param = {
      fartherProps: this.fartherProps
    }
    return(
      <div id="Communicate">
        <h1>父子组件之间的通信</h1>
        <p>{'-----------------------父组件-----------------------'}</p>
        <div>
          <h2>我是父组件</h2>
        </div>
        <br/>
        <p>{'-----------------------子组件-----------------------'}</p>
        <CommunicateChild param={param}/>
      </div>
    )
  }
}

.子组件代码

import React, { Component } from 'react'

export default class CommunicateChild extends Component{
  render(){
    return(
      <div id="CommunicateChild">
        <div>
          <h3>子组件调用父组件的值</h3>
          <p>{this.props.param.fartherProps}</p>
        </div>
      </div>
    )
  }
}

2、子组件调用父组件的方法

  有时候子组件需要调用父组件的某个方法，需要在父组件加载子组件的时候将方法当参数传递给子组件。

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'

export default class Communicate extends Component{
  constructor(props){
    super(props)
  }
  methodToChild(){
    alert("子组件调用父组件的方法")
  }
  render(){
    return(
      <div id="Communicate">
        <h1>父子组件之间的通信</h1>
        <p>{'-----------------------父组件-----------------------'}</p>
        <div>
          <h2>我是父组件</h2>
        </div>
        <br/>
        <p>{'-----------------------子组件-----------------------'}</p>
        <CommunicateChild  methodToChild={this.methodToChild.bind(this)}/>
      </div>
    )
  }

.子组件代码

import React, { Component } from 'react'

export default class CommunicateChild extends Component{
  constructor(props){
    super(props)
    this.getParentMethod = this.getParentMethod.bind(this)
  }
  getParentMethod(){
    this.props.methodToChild()
  }
  render(){
    return(
      <div id="CommunicateChild">
        <div>
          <h3>子组件调用父组件的方法</h3>
          <p><button onClick={this.getParentMethod}>调用父组件的方法</button></p>
        </div>
      </div>
    )
  }
}

3、父组件调用子组件的方法

  在没有使用react-redux的情况下，父组件通过读取子组件的ref，可获取子组件全部的信息，从而调用子组件的方法或值。代码如下：

this.refs.childRef.childMethod()
//childRef为子组件的ref，childMethod为子组件的方法

但是，当使用的react-redux后，ref获取的是connect组件的信息，因而我们需要另外想办法，把子组件的信息传递给父组件。

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'

export default class Communicate extends Component{
  constructor(props){
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  //绑定子组件
  onRef = (ref) => {
    //this.child即为子组件
    this.child = ref
  }
  //执行调用子组件的方法
  handleClick(){
    this.child.methodToParent()
  }
  render(){
    return(
      <div id="Communicate">
        <h1>父子组件之间的通信</h1>
        <p>{'-----------------------父组件-----------------------'}</p>
        <div>
          <h3>{'父组件调用子组件的方法'}</h3>
          <p><button onClick={this.handleClick}>调用子组件方法</button></p>
        </div>
        <br/>
        <p>{'-----------------------子组件-----------------------'}</p>
        <CommunicateChild onRef={this.onRef}/>
      </div>
    )
  }
}

.子组件代码

import React, { Component } from 'react'

export default class CommunicateChild extends Component{
  constructor(props){
    super(props)
  }
  //组件render后调用父组件的方法把子组件的this传递给父组件
  componentDidMount(){
    this.props.onRef(this)
  }
  //父组件调研该方法
  methodToParent(){
    alert("父组件调用到子组件的方法了")
  }
  render(){
    return(
      <div id="CommunicateChild">
        <div>
        </div>
      </div>
    )
  }
}

4、父组件调用子组件的值

   主要通过子组件通过传递参数调用父组件某个方法改变父组件的state

.父组件代码

import React, { Component } from 'react'
import CommunicateChild from './communicateChild'

export default class Communicate extends Component{
  constructor(props){
    super(props)
    this.handleEmail = this.handleEmail.bind(this)
    this.state = {
      email: ''
    }  
  }
  //子组件调用父组件的方法传值
  handleEmail(val){
    this.setState({
      email: val
    });
  }
  render(){
    return(
      <div id="Communicate">
        <h1>父子组件之间的通信</h1>
        <p>{'-----------------------父组件-----------------------'}</p>
        <div>
          <h2>我是父组件</h2>
          <h3>{'父组件调用子组件的值'}</h3>
          <div>用户邮箱：{this.state.email}</div>
        </div>
        <br/>
        <p>{'-----------------------子组件-----------------------'}</p>
        <CommunicateChild handleEmail={this.handleEmail}/>
      </div>
    )
  }
}

.子组件代码

import React, { Component } from 'react'

export default class CommunicateChild extends Component{
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.childProps = "我是子组件的值，父组件调用我"
  }
  componentDidMount(){
    this.props.handleEmail(this.childProps)
  }
  //传值给父组件
  handleChange(){
    var val = this.refs.emailDom.value;
    val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
    this.props.handleEmail(val);
  }
  render(){
    return(
      <div id="CommunicateChild">
        <div>
          <h3>子组件调用父组件的方法传值给父组件</h3>
          <p><input ref='emailDom' type="text" onChange={this.handleChange}/></p>
        </div>
      </div>
    )
  }
}

GitHab React父子组件通信