Ant Design中模态框中订单金额随商品数量与商品类别动态变化的记录

Ant Design中模态框中订单金额随商品数量与商品类别动态变化的记录

1. 第一步，创建模态框，模态框中有商品（商品种类），商品数量，订单金额

     <FormItem            {...formItemLayout}            label={"商品"}            hasFeedback>            {getFieldDecorator('goodsId', {              initialValue: dto.goodsId+'' ,//value必须是字符串格式，因为Select              rules: [{required: true, message: HAP.getMessage("商品是必须的","goods is required")}]            })(              <Select onChange={moneyChange}>  //change函数                {goodsSelect}                 //goodsSelect 通过查询数据库得到              </Select>            )}     </FormItem>     <FormItem            {...formItemLayout}            label={'数量'}            hasFeedback>            {getFieldDecorator('goodsNumber', {              initialValue: dto?dto.goodsNumber:0,              rules: [{required: true, message: HAP.getMessage("数量是必须的","goodsNumber is required")},                { validator: checkNumber }]         // checkNumber验证函数            })(              <InputNumber onChange={moneyChange} type='number'  min={1}/>  //change函数            )}     </FormItem>     <FormItem            {...formItemLayout}            label={'订单金额'}>            {getFieldDecorator('aTotal', {              initialValue: dto?dto.aTotal:'',            })(              <Input disabled size="default"/>            )}     </FormItem>

1. goodsSelect通过React的组件渲染后的加载函数去数据库查出所有的商品集合设置到state的goods:[]中，再通过map循环state.goods创建并放到option中

   //所有商品

   const goodsSelect = this.state.goods.map(item => <Option  key={item.goodsId} value={item.goodsId + ""}>{item.goodsName}</Option>);

2. 商品数量必须是正整数，所以checkNumber函数为：

   //数量正则验证

   checkNumber = (rule, value, callback) => {    const reg = /^[1-9]\d*$/;    if (reg.test(value)) {        callback()    } else {      callback('请输入正整数');    }};

3. 商品与数量设置为同一onChange函数，它俩都可以触发

    //动态金额变化函数    moneyChange = (value) => {  //value：触发onChange是从form表单传递过来的标签的value(goodsId 或者 goodsNumber)        let goodsId;        //定义商品Id        let goodsNumber;    //定义数量        this.modelFormRef.validateFields(["goodsId","goodsNumber"],(err, values) => {          //goodsId=values['goodsId']||"";    得到form表单中的goodsId          //goodsNumber=values['goodsNumber']||""; // 得到form表单中的商品数量          //上面两行方法不能使用，这种方法得到的数据不是即时的，总是慢一拍          // 通过判断value类型辨别value是goodsId还是goodsNumber            if('number'==typeof(value)){    //传递过来的商品数量是number类型               goodsNumber=value;            }else {                           //传递过来的商品Id是string类型              goodsId=value;            }            let goodsPrice = 0.0;               // 定义单价            this.state.goods.map(item =>{     //得到价格              if(item.goodsId==goodsId){   //循环goods，通过if找到与goodId对应的goods对象                goodsPrice=item.goodsPrice;   //返回商品单价给goodsPrice              }            });            //返回订单金额 使用三元运算符进行限制            this.modelFormRef.setFieldsValue({'aTotal': (goodsNumber*1.0*goodsPrice)>=0?(goodsNumber*1.0*goodsPrice):0});        });    }