AntD-form表单取值赋值,React-父子组件传值,JS-reduce方法

合同金额自动计算

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

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

实现思路:

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>