父组件调用子组件的方法

接着上一篇

搜索组件 - 父组件向子组件传值(子组件调用父组件方法)

上一篇最后问到, 如果我想通过父组件中的事件来触发子组件中的方法应该怎么做呢
首先, 第一步

子组件中写一个方法

比如说例子中的获取子组件input中的值
子组件js

  getInputData = () => {
    this.nameValue = this.state.nameValue;
    this.idValue = this.state.idValue;
    // 搜索时的值要传入到父组件的接口. 
    // 所以牵扯到子组件向父组件传值
    // 1.在子组件中定义一个事件. 用父组件传递过来的属性(props),是个函数,
    // 2. 呼叫这个函数把在子组件中拿到的值传递到父组件中的函数进行处理
    this.props.getInitData(
      this.nameValue,
      this.idValue,
    )
  }
  

父组件中调用子组件的地方增加一个属性onRef

父组件js

<SearchBox
  onRef={this.onRef1} // 父组件调用子组件方法
 />

在父组件中写入这个属性的方法

父组件js

 // 父组件调用子组件的方法
  onRef1 = (ref) => {
    this.child = ref;
  }