码迷,mamicode.com
首页 > 其他好文 > 详细

React父组件调用子组件

时间:2019-06-12 19:50:53      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:cli   dcom   onclick   imp   his   bsp   return   parent   port   

通点击父组件按钮调用子组件的方法

父组件:

import React, {Component} from ‘react‘;
import ChildComponent from ‘./child‘;
export default class ParentComponent extends Component {
    render() {
        return(
            <div>
                <ChildComponent onRefChild={this.onRefChild} />
                <button onClick={this.clickParent.bind(this)} >{‘点击‘}</button>
            </div>
        )
    }

    onRefChild = (ref) => {
        this.child = ref
    }

    clickParent = (e) => {
        this.child.childMethods()
    }

}

子组件:

import React, {Component} from ‘react‘;
export default class ParentComponent extends Component {
    componentDidMount(){
        this.props.onRefChild(this)
    }

    childMethods = () => alert(‘子组件被执行了‘)

    render() {
        return (<div>我是子组件</div>)
    }

}

 

React父组件调用子组件

标签:cli   dcom   onclick   imp   his   bsp   return   parent   port   

原文地址:https://www.cnblogs.com/0828-li/p/11011601.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!