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

灰太狼 2020-11-29 15:37 469阅读 0赞

#### 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});
            });
        }
````