react 父元件呼叫子元件的方法

2021-08-28 14:45:36 字數 554 閱讀 6649

1.父元件內的**:

onref = (e) => {

this.modal = e

//新增

add=(e)=>{

this.modal.showmodal();

步奏分析:父元件給子元件傳入乙個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()方法。

react父元件呼叫子元件方法

實現父元件呼叫子元件方法 基本思路 父元件可以通過props把自己的函式方法傳遞給子元件呼叫,那麼子元件通過這個函式把自己的元件例項傳回給父元件,父元件只需要儲存這些例項便可以呼叫子元件的方法 父元件import react,from react import from antd import fr...

React父元件呼叫子元件方法

import react,from react export default class parent extends component click click e class child extends component myname alert hello from child compon...

react父元件呼叫子元件的方法

1.使用refs來調 react16.3以前的方法 首先父元件裡呼叫子元件的地方,給子元件傳個屬性 ref fromfather 然後在父元件呼叫this.refs.fromfather.子元件方法 var hellomessage react.createclass render function...