react父组件和子组件之间相互调用方法

父组件：

import React, { Component } from 'react';
import Child from './child2'
class Parents extends Component {

  constructor(props) {
    super(props);
  }


  handleCancel = () => {
    console.log('父组件的方法被子组件调用了');
  }

  childClick = () => {
    this.child.onShow()
  }

  render() {
    return (
      <section>
        <button onClick={this.childClick}>父组件调用子组件的函数</button>
        <Child handleCancel={this.handleCancel} onRef={(ref) => { this.child = ref }}></Child>
      </section>
    );
  }

}

export default Parents;

 

子组件：

import React, { Component } from 'react';

class Child extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.onRef(this)
  }


  onShow() {
    console.log('子组件的方法被父组件调用')
  }

  render() {
    return (
      <section>
        <button onClick={() => { this.props.handleCancel() }}>子组件用this.props调用父组件的函数</button>
      </section>
    );
  }
}

export default Child;