父组件调用子组件的方法

2022-02-22  本文已影响0人  懒懒猫

推荐把方法写到父组件里。子组件通过props调用,或父组件传值控制子组件调用
父,jsx

import React, { Component } from 'react';
import Child from '@/components/modal/CancelTestPlan'; //取消测试计划组件
class statistics extends Component {
    render() {
        //对state数据解构赋值
        
        return (
          <div>
          <Child onRef={this.onRef} />
          <button onClick={this.click} >click</button>
      </div>
        )
    }
    onRef = (ref) => {
      this.child = ref
  }

  click = (e) => {
      this.child.myName()
  }
}
export default statistics;

子.jsx

import React, { Component, useState } from 'react';

class Child extends Component {

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

  myName = () => {
    alert('xiaohesong')
  }

  render() {
    return (
      <div>
        Open

      </div>
    )
  }
}

export default Child;
上一篇 下一篇

猜你喜欢

热点阅读