React实现从子组件向父组件传参的两种方式

方式一： 

当前列表实现调用公共list组件，将分页pageSize,pageNo的值从子组件传到父组件。分页的传参如下所示。

当前页的调用：

 // 父组件的调用子组件

handleChangePage = query => {
    const { defaultQuery } = this.state;
    this.props.getList(defaultQuery);
    this.setState({
      pageNum: query,
    });
  };

  handleShowSizeChange = query => {
    const { defaultQuery } = this.state; 
    this.props.getList(defaultQuery);
    this.setState({
      pageNum: query.current,
      pageSize: query.size,
    });
  };

 const listProps = {
      columnsData: this.getColumns(),
      list: _.get(list, 'value.data') || [],
      total: _.get(list, 'value.total'),
      location: location.pathname,
      enableRowSelection: true,
      page: pageNum || 1,
      pageSize: pageSize || 10,
      sizeOptions: ['10', '20', '50', '100'],
      getSelectedData: this.getSelectedData,
      onChangePage: this.handleChangePage,
      onChangePageSize: this.handleShowSizeChange,
    };

子组件里面传参：

 onPageNoChange = page => {
    const { onChangePage } = this.props; // 父传子的方法
    if (onChangePage) {
      onChangePage(page); // 将子组件的参数传回父组件
    }
    this.setState({
      pageNo: page,
    });
  };

  onShowSizeChange = (current, size) => {
    const { onChangePageSize } = this.props; // 父传子的方法
    if (onChangePageSize) {
      onChangePageSize({ current, size });// 将子组件的参数传回父组件
    }
    this.setState({
      pageSize: size,
    });
  };

方式二：

同样是从子组件向父组件传参，传参的方式与第一种有所区别。是将子组件this的所有属性和方法都传回父组件，在父组件调用子组件的方法获取子组件页面的数据。

父组件调用子组件：

 // 提交的方法
 handleSubmitApproval = tableList => {
    const { submitApproval  } = this.props;
    // 从回调函数中返回的this.swiftTemplateValue,直接调用该返回的handleSave方法获取参数。
    const fieldCurrent = this.swiftTemplateValue.handleSave(); 
    submitApproval(fieldCurrent );
  };

 getSwiftTemplateValue = ref => {
    if (ref) {
      this.swiftTemplateValue = ref;
    }
  };

 // 调用子组件
 <NewSwiftTemplate
     key={modelId}
     messageTypeValue={this.state.messageTypeValue}
     templateName={this.state.templateName}
     isAddOrEditValue={isAddOrEdit}
     getSwiftTemplateValue={this.getSwiftTemplateValue} // 回调函数
 />

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

  componentDidMount() {
    const { getSwiftTemplateValue } = this.props;
    // 调用父组件的方法，并把子组件的this所有属性和方法返回子组件
    if (getSwiftTemplateValue) {
      getSwiftTemplateValue(this); 
    }
  }

  componentWillReceiveProps(nextProps) {
    const { getSwiftTemplateValue } = this.props;
     // 调用父组件的方法，并把子组件的this所有属性和方法返回子组件
    if (getSwiftTemplateValue) {
      getSwiftTemplateValue(this);
    }
  }

// handleSave方法获取子组件的表单字段数据