React中父、子控件方法的互相调用

1.子控件调用父控件的方法

父控件：

import React,{Component} from "react";
export default class Parent extends Component {
  render() {
    return (
      <div >
        <Child parentMethod={this.parentMethod}/>
      </div>
    )
  }

  parentMethod = () => {
    alert("parentMethod");
  }

}

子控件：

import React,{Component} from "react";
import {Button} from "antd";
export default class Child extends Component {
   render() {
    return(
      <div>
        子控件
        <Button onClick={this.callParentMethod}>call parent</Button>
      </div>
    )
  }

 callParentMethod=()=>{
    if(this.props.parentMethod!==null){
      //调用父控件的方法
      this.props.parentMethod();
    }
  }

}

（1）在父控件中通过<Child parentMethod={this.parentMethod}/>这一句，将父控件的方法传递给子控件。
（2）子控件通过this.props.parentMethod()调用到父控件的方法。

2.父控件调用子控件的方法

父控件：

import React,{Component} from "react";
import {Button} from "antd";
export default class Parent extends Component { 
  child;//定义一个子控件的引用承接对象
  render() {
    return (
      <div>
        <Child onRef={this.onRef} />
        <Button onClick={this.callChildMethod}>call child</Button>
      </div>
    )
  }

  /**
   * 这个方法是将子控件的引用传递过来，可以随意取名
   */
  onRef = (ref) => {
    this.child = ref;
  }

  /**
   * 调用子控件的方法
   */
  callChildMethod= () => {
    this.child.childMethod();
  }
}

子控件：

import React,{Component} from "react";
import {Button} from "antd";
export default class Child extends Component{
  componentDidMount() {
    if(this.props.onRef!==null){
      //将自身的引用传递给父控件
      this.props.onRef(this);
    }
  }

  render() {
    return(
      <div>
        子控件
      </div>
    )
  }

  childMethod=()=>{
    alert("childMethod");
  }
}

（1）在父控件中通过<Child onRef={this.onRef} /> 在父子控件之间产生联系。
（2）在子控件中通过 this.props.onRef(this) 将自身的引用传递过去。
（3）在父控件中通过this.child = ref;拿到子控件的引用。
（4）在父控件中通过this.child. 调用子控件的各种方法。

3.父子控件方法的互相调用

父控件：

import React, {Component} from "react";
import Child from "./Child";
import {Button} from "antd";

export default class Parent extends Component {
  child;//定义一个子控件的引用承接对象
  render() {
    return (
      <div style={{width: 200, height: 200, backgroundColor: "#689F38"}}>
        <Child onRef={this.onRef} parentMethod={this.parentMethod}/>
        <Button onClick={this.callChildMethod}>call child</Button>
      </div>
    )
  }

  /**
   * 这个方法是将子控件的引用传递过来，可以随意取名
   */
  onRef = (ref) => {
    this.child = ref;
  }

  /**
   * 调用子控件的方法
   */
  callChildMethod = () => {
    this.child.childMethod();
  }

  parentMethod = () => {
    alert("parent");
  }

}

子控件：

import React,{Component} from "react";
import {Button} from "antd";
export default class Child extends Component{
  componentDidMount() {
    if(this.props.onRef!==null){
      /**
       * 将自身的引用传递给父控件
       */
      this.props.onRef(this);
    }
  }

  render() {
    return(
      <div style={{width:100,height:100,backgroundColor:"#ABCDEF"}}>
        子控件
        <Button onClick={this.callParentMethod}>call parent</Button>
      </div>
    )
  }

  childMethod=()=>{
    alert("childMethod");
  }

  callParentMethod=()=>{
    if(this.props.parentMethod!==null){
      /**
       * 调用父控件的方法
       */
      this.props.parentMethod();
    }
  }
}

最后编辑于：2019.07.08 18:38:27