ant-degisn的数字输入框的使用和表格的价格计算_antd 报价表格类型小计-CSDN博客

本文介绍了在React项目中使用Ant Design的数字输入框实现表格内的价格计算和限制输入数值范围。详细讲解了如何处理从后台获取的数据格式，以及在数字输入框值变化时动态更新表格总价的方法。通过设置`parser`监听输入框值的变化，确保输入始终为1-99的数字。

需求

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) =>
  <InputNumber onChange={this.changeCount.bind(this, record)}/>  
  //上面这一行是插入表格的数字输入框，他接收当前行的数据(record)
}]

//下面的count参数是数字输入框的值
changeCount = (record, count) => {
      record.count = count  //将数字输入框的值赋予 传进来的当前行的count