AntDform表单取值赋值React父子组件传值JSreduce方法

合同金额自动计算

• 如下图. 进入页面的时候合同金额默认值为系统自动计算

• 在有行信息的时候. 需要把金额累加. 给合同金额赋值.

实现思路:

1: 通过 props 传值,2: 通过 reduce 计算总金额,3: 通过 form.setFieldsValue 方法. 给合同金额赋值

// 父组件页面: 父组件调用子组件的时候. 给子组件一个方法. 用来接收子组件的返回值
    render(
        <TableForm 
            ...
            handleTotal={value =>this.handleTotal(value)}
        />
    )
// 子组件页面: 子组件每次新增行信息后都会调用一次获取行信息列表的方法, 在这里把返回值直接给到父组件
  getList = () => {const { queryAll} = this.props;
    queryAll({contractNum: this.props.contractNum}, res => {const { handleTotal} = this.props;
      handleTotal && handleTotal(res);
      this.setState({data: res});
    });
  };

// 父组件页面: 调用给到子组件的方法. 获取行项目总金额
  handleTotal = value => {const total = value.reduce((total, item) => total + Number(item.totalPrice), 0)
    .toFixed(2);
    this.props.form.setFieldsValue({contractMoney:total})
  }

通过三目判断和 form.getFieldValue 方法判断合同金额是否展示默认值

    <Col md={8} sm={24}>
        <Form.Item label="合同金额">
            {getFieldDecorator('contractMoney', {initialValue: form.getFieldValue('contractMoney') === undefined ? '系统自动计算' : form.getFieldValue('contractMoney'),
            rules: [{required: true}],
            })(<Input placeholder="请填写" disabled />)}
        </Form.Item>
    </Col>