React框架子组件向父组件传表单参数，使用回调函数

运用场景：在开发点击+号，新增一个表单，点击减号删除一个表单，点击保存时提交当前页面的多个表单的数据，这时候，在父组件要用到search公共组件中的表单数据，传参格式为[{},{},{}]。

思路：点击+号，新增一个表单，这个时候要给表单一个key，当有多个表单的时候，可以区分每个表单的数据。使用react中的表单的ref进行表单数据的传递。

 

前情提要：search为一个公共组件，表单的产生在该组件内。

第一步：在公共的search组件中，添加ref方法。

 <Form style={colorChange} onSubmit={this.handleSubmit} ref={this.getForm}                                       className="CommonSearch">
            {ShowFormItem}
          </Form>


  getForm = ref => {
    const { form, refForm } = this.props; 
    if (ref && refForm) {
      refForm(Object.assign({}, form, { onSubmit: ref.props.onSubmit }));
    }
  };

// onSubmit : 是公共search里面的一个查询方法，发送查询接口，并返回查询条件
// ref:  作为回调函数，与父组件之间进行表单数据传递

第二步：在父组件写+号和-号的方法

 handleRemove = index => {  // 减号方法
    const { formArray, number, saveResult } = this.state;
    const saveValue = _.get(saveResult, 'value');
    if (saveValue) {
      const saveResultDelete = {};
      const saveResultValue = [];
      const lastQuery = {};
      const indexValue = index + 1;
      lastQuery.version = _.get(saveValue, `${indexValue}.data.version`);
      lastQuery.interbankMarketPaymentId = _.get(saveValue, `${indexValue}.data.interbankMarketPaymentId`);
      this.props.handleDelete(lastQuery);
      _.each(saveValue, (item, key) => {
        if (key !== indexValue) {
          saveResultValue.push(item);
        }
      });
      
      saveResultDelete.value = saveResultValue;
      this.setState({
        saveResult: saveResultDelete,
      });
    }
    this.setState({
      number: number - 1,
      formArray: _.filter(formArray, (item, i) => i !== index),
    });
  };

  getRef = (index, formValue) => { // 接收子组件传过来的表单数据，放在formArrayValue 
    this.formArrayValue = [...(this.formArrayValue || []), formValue];
  };

  handleAdd = () => { // 添加方法
    const { number, formArray } = this.state;
    const searchOption = interBankMarket;
    const searchOptionResult = this.transform(searchOption, number);
    this.setState({
      number: number + 1,
      formArray: formArray.concat([searchOptionResult]),
    });
  };

  transform = options => {
    return _.map(options, item => Object.assign({}, item, { key: `${item.key}` }));
  };

// formArray: 为一个[{},{},{}]这样的表单数据配置文件。如果没法使用配置文件，此处也可以为一个写好的表单子组件。

第三步：点击保存按钮，对多个表单的数据进行操作

 handleSave = () => {
    const formItems=[];
    _.each(this.formArrayValue, (item, index) => {
      item.validateFields(err => {
        if (err) {
          return;
        }
        const values = item.onSubmit();
       formItems.push(values);
      });
    });
   this.props.createInterbankMarketPayment(formItems);
  };

以上就是点击+号新增一个表单，点击-号，删除一个表单，点击保存批量保存表单的业务代码。

效果如下：