react to call the parent component sub-assembly method, call the parent component sub-assembly method

We much gossip that directly on the code

// parent component 
Import React, {from} the Component 'REACT' ; 
class {Parents the extends the Component 
    constructor (The props) { 
        Super (The props); 
        the this .STATE = { 
        } 
    } 
    componentDidMount () { 

    } 
    
    handleCancel = (E) => { 
        the console.log ( 'method call parent element assembly quilt' ); 
    } 

    childClick = (E) => {
         the this .child.onShow () 
    } 
    the render () { 
        return (
             <sectionTop> 
                <= {Child the onCancel the 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('The method of the subassembly is called parent element' ) 
    } 

    the render () { 
        return (
             <sectionTop> 
                <div the onClick = {() => { the this .props.handleCancel ()}}> with the parent component subassembly call this.props function </ div> 
            </ sectionTop>         ); 
    } 
} 
Export default Child;

 

Guess you like

Origin www.cnblogs.com/houjl/p/11165777.html