ant-degisn的数字输入框的使用和表格的价格计算

需求

1.最近在项目中需要用表格计算价格，所以需要用到ant-design中的数字输入框。如下图

这里有两个表格，我需要实现的是

1.表格内价格的计算和总价格的计算

2.数字输入框只能输入1-99的数字，不能输入中文。

实现

1.数据格式。

这里从后台返回的数据格式是这样的。

[
 [{parts_messages: [{parts_price,amount,vendor_oe}, 
    {parts_price,amount,vendor_oe}]
  },{seller_messages: [{seller_name}]}
 ],

 [{parts_messages},{seller_messages}]
]

2.我需要的是对数字输入框增加或减少时，表格的金额小记和总金额都更新

const columns = [{
  title: '数量', key: 'count',align:'center',render: (text,record,index) =>
    
  //上面这一行是插入表格的数字输入框，他接收当前行的数据(record)
}]

//下面的count参数是数字输入框的值
changeCount = (record, count) => {
      record.count = count  //将数字输入框的值赋予 传进来的当前行的count
      record.amount = count*record.part_price  //将数字输入框的值乘以单价，得到当前行的商品的总价
      let lists = this.state.listdata;  //拿到后台返回来的数据，也就是上面第一步的数据结构。
      let totalprice = 0  //总价默认为0
      lists.map((list, index) => {     //循环
        list[0].parts_messages.forEach((item, index) => {
            //如果parts_messages的vendor_oe == 传进来的当前行的唯一值vendor_oe,那么就是需要对当前iten进行操作
            if(item.vendor_oe == record.vendor_oe) {
                item = record    //当前行赋予item
            }
            totalprice+=item.amount   //将当前商品amount相加
        })
      })
      //最后保存到data中即可实现表格的价格和总价计算
      this.setState({
          listdata: lists,
          totalprice
      })
}

数字输入框的实现。

对上一步的InputNumber输入框进行修改得到

  

parser1 = (value) => {
      if(value != '' && value <99) {
        return value.replace(/\D/g, '')
      } else if(value >=99){
        console.log(value)

        return 99
      } else {
          return 1
      }
}

文档解释：指定从 formatter 里转换回数字的方式，和 formatter 搭配使用，测试了一下发现可以不用formatter。

相当于一个监听函数，就是监听数字输入框的值，当值改变时，就执行parser1方法，然后返回一个新的值。