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>