react 父组件调用子组件的方法

1.父组件内的代码：

onRef = (e) => {

this.modal = e

}

//添加

add=(e)=>{

this.modal.showModal();

}

<AddModal onRef={this.onRef} Parent={this} editMessage={this.state.editMessage}></AddModal>

步奏分析：父组件给子组件传入一个onRef方法过去。接受子组件反馈的参数e,把接受到的值赋予给，this.modal这时就可以调用子组件的一个方法叫showModal()方法。

2.子组件代码：

constructor(props){

super(props)

this.state={

visible: false,

}

this.props.onRef(this);

}

showModal(){

}

步奏分析：子组件接受到父组件传过来的方法，把this反馈了出去。此时的this就是子组件的实例。

3.总结：父组件给子组件传入一个方法，子组件把自己的实例反馈出来，就是自身的this。父组件接受到子组件反馈的信息，保存在了this.modal里面。此时父组件的另外一个方法add就可以触发子组件的showModal()方法。