zoukankan      html  css  js  c++  java
  • react 父组件调用子组件方法

    import React from 'react'
    import '../page1/header.css'
    import { Table } from 'antd'
    import Child from './child'//引入的子组件

    export default class Header extends React.Component{
      constructor(){
      super()

      }

    }

    onRef = (ref) => {//react新版本处理方式
      this.child = ref
    }
    click = (e) => {
      this.child.myName()
    }

    render(){

      return (<div>

        <Child onRef={this.onRef} />

        <button onClick={this.click}>父组件调用子组件方法</button>

      </div>

      )

      }

    //子组件

    import React from 'react'

    export default class Header extends React.Component{
      constructor(props){
        super(props)
      }

    componentDidMount(){
      this.props.onRef(this)
    }
    myName = () => alert('父组件调用子组件方法成功')
    render(){

    return (
      <div className="header">
      </div>
    )
    }
    }

  • 相关阅读:
    数组对象
    禁止鼠标右键保存图片、文字,禁止拖动图片等代码
    解决vscode 电脑卡顿
    vscode Html标签自动补全
    git提交报错
    作为一个程序员为什么要写博客?
    aaa
    JDBC
    去ioe
    去中心化
  • 原文地址:https://www.cnblogs.com/whlBooK/p/10768959.html
Copyright © 2011-2022 走看看