码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-10-25 21:08:36      阅读:653      评论:0      收藏:0      [点我收藏+]

标签:ref   ams   搜索   form   组件   bind   validate   value   arch   

1.父组件

// 父组件
onRef = (ref) => {
  this.child = ref;
}

handleSearch(params){
  // 获取搜索框的值
  console.log(params);
}

<SearchForm
  search={this.handleSearch.bind(this)}
  onRef={this.onRef}
  submit={this.child.onSubmit}
></SearchForm>

2.子组件

// 子组件
componentDidMount(){
  this.props.onRef(this);
}

onSubmit = () => {
  // 获取表单的值
  this.props.form.validateFieldsAndScroll((err, values) => {
    if(!err){
      this.props.search && this.props.search(values);
    }
  });
}

.

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

标签:ref   ams   搜索   form   组件   bind   validate   value   arch   

原文地址:https://www.cnblogs.com/crazycode2/p/9852792.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!