react 父元件呼叫子元件的方法
阿新 • • 發佈：2018-12-12
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()方法。