1. 程式人生 > >react 父組件 調用 子組件的方法

react 父組件 調用 子組件的方法

ram validate react con params sea field efi earch

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 父組件 調用 子組件的方法