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

    我们闲话不多说,直接上代码

    // 父组件
    import React, {Component} from 'react';
    class Parents extends Component {
        constructor(props) {
            super(props);
            this.state = {
            }
        }
        componentDidMount() {
    
        }
        
        handleCancel = (e) => {
            console.log('父组件的方法被子组件调用');
        }
    
        childClick = (e) => {
            this.child.onShow()
        }
        render() {
            return (
                <section>
                    <Child onCancel={this.handleCancel} onRef={(ref)=>{ this.child = ref}}></Child>
                    <div onClick={this.childClick}>调用子组件的函数</div>
                </section>
            );
        }
    }
    
    export default Parents;
    
    
    
    // 子组件
    import React, {Component} from 'react';
    class Child extends Component {
        constructor(props) {
            super(props);
            this.state = {
            }
        }
    
        componentDidMount() {
            this.props.onRef(this)
        }
        
        onShow(){
            console.log('子组件的方法被父组件调用')
        }
    
        render() {
            return (
                <section>
                    <div onClick={()=>{this.props.handleCancel()}}>子组件用this.props调用父组件的函数</div>
                </section>
            );
        }
    }
    
    export default Child;
  • 相关阅读:
    基于opencv的摄像头的标定
    图像的角点简介
    周转时间和平均带权时间等
    QT各个版本的下载的地址
    参考文献格式
    sublime中的emmet插件的使用技巧
    sublime快捷键
    CSS布局居中
    Markdown 语法说明(简体中文版)
    sql作业题
  • 原文地址:https://www.cnblogs.com/houjl/p/11165777.html
Copyright © 2011-2022 走看看