使用React实现时间的天数，小时数，分钟数之间的自动转化

由于公司项目需要使用React实现时间的天数，小时数，分钟数之间的自动转化，在遇了很多坑后终于解决了问题。

需要实现的功能：当用户在输入小时数的时候，超过24小时就自动转化为相应的天数；当用户在输入分钟数的时候，超过60分钟以上就要自动转化成相应的小时数和天数；且要实现再次输入的叠加（当已经是1天12时，输入61分钟；得到的是1天13时1分钟。以此类推）。

1. 先实现天数、小时数、分钟数的转化函数

   // 日期转化函数
   // 需要实现功能：当在输入了大于等于24小时就转化成相应的天数，当输入了大于等于60分钟就转化成相应的天数和小时数
   // 数值范围：天 时 分 都在0~9999 暂时先不考虑天数超越极限的情况
   
   // 先进行分转化，再统一进行小时转化
   // 传入的参数分别为 时 分
   export default function transformDate(day,hour,min) {
       // 用于存放新生成的天 时 分
       let newDay = 0;
       let newMin = 0;
       let newHour = 0;
       let arr = []
       // 如果小时大于等于60就转化为小时
       if(min >= 60) {
           newMin = min % 60
           newHour = parseInt(min / 60)
       } else {
           newMin = min
       }
       // 将得到的小时数加上，进行统一转化
       hour = hour + newHour
       // 如果天数大于等于24就转化为天数
       if(hour >= 24) {
           newDay = parseInt(hour / 24) + day
           newHour = hour % 24
       } else {
           newHour = hour
       }
       
       arr.push(newDay)
       arr.push(newHour)
       arr.push(newMin)
       // 最后以数组的形式返回
       return arr
   }
   

2. 将函数导入到需要使用的文件中

   使用的是React的ant design中的inputNumber的onChange监听数字的变化回调，onChange获取到当前输入框内的数字后再放入失去焦点onBlur（）中进行函数转化，再更新数据到页面上。

以下是部分实现代码：

这一部分是实现监听输入框内的数字回调

const [payDateDay, setPayDateDay] = useState(0);
  const [payDateHour, setPayDateHour] = useState(0);
  const [payDateMin, setPayDateMin] = useState(0);
  const [shipDateDay, setShipDateDay] = useState(0);
  const [shipDateHour, setShipDateHour] = useState(0);
  const [shipDateMin, setShipDateMin] = useState(0);
  
  const transformPayDay= (payDateDay:number) => {
    setPayDateDay(payDateDay)
  }

  const transformPayHour= (payDateHour:number) => {
    setPayDateHour(payDateHour)
  }

  const transformPayMin= (payDateMin:number) => {
    setPayDateMin(payDateMin)
  }

  const transformShipDay= (shipDateDay:number) => {
    setShipDateDay(shipDateDay)
  }

  const transformShipHour= (shipDateHour:number) => {
    setShipDateHour(shipDateHour)
  }

  const transformShipMin= (shipDateMin:number) => {
    setShipDateMin(shipDateMin)
  }

这一部分是实现时间转化

{
            field: (ctx:any) => {
                return ( 
                  <AntdForm.Item
                  name="month"
                  label='未支付订单'
                  rules={[{ required: true, message: '未支付订单不能为空' }]}
                  extra={'#到达设置时间后订单由系统自动关闭，设置都为0默认不关闭'}
                  >
                    <InputNumber
                    min={0}
                    max={9999}
                    defaultValue={0}
                    value={payDateDay}
                    style={{ width: '25%' }}
                    onChange={transformPayDay}
                    />
                    <span>&nbsp;天&nbsp;</span>
                    <InputNumber
                    min={0}
                    max={9999}
                    defaultValue={0}
                    value={payDateHour}
                    style={{ width: '25%' }}
                    onChange={transformPayHour}
                    onBlur={() => {
                      if(payDateHour >= 24) {
                        setPayDateDay(TransformDate(payDateDay,payDateHour,payDateMin)[0])
                        setPayDateHour(TransformDate(payDateDay,payDateHour,payDateMin)[1])
                        setPayDateMin(TransformDate(payDateDay,payDateHour,payDateMin)[2])
                        if((payDateDay + (payDateHour / 24)) > 9999) {
                          alert('天数的取值范围为0~9999！')
                        }
                      }
                    }}
                    />
                    <span>&nbsp;时&nbsp;</span>
                    <InputNumber
                    min={0}
                    max={9999}
                    defaultValue={0}
                    value={payDateMin}
                    style={{ width: '25%' }}
                    onChange={transformPayMin}
                    onBlur={() => {
                      if(payDateMin >= 1440) {
                        setPayDateDay(TransformDate(payDateDay,payDateHour,payDateMin)[0])
                        setPayDateHour(TransformDate(payDateDay,payDateHour,payDateMin)[1])
                      } else if(payDateMin >= 60) {
                        setPayDateHour(TransformDate(payDateDay,payDateHour,payDateMin)[1])
                      }
                      if((payDateDay + (payDateHour / 24) + (payDateMin / 1440)) > 9999) {
                        alert('天数的取值范围为0~9999！')
                      }
                        setPayDateMin(TransformDate(payDateDay,payDateHour,payDateMin)[2])
                    }}
                    />
                    <span>分&nbsp;后自动关闭订单</span>
                  </AntdForm.Item>
                );
            }
        },

为什么说遇到了很多坑呢，一开始想的是使用onChange变化回调监听数字变化就能实现功能，可是在使用过程中我发现，在输入的过程中当前输入框内的数字不会发生变化。因为是在鼠标离开输入框的一瞬间，输入框内的数字还是当前数字，所以onChange又进行了一次回调，导致数据进行了叠加。就比如说我输入0天0时120分钟，当输入的是120分钟时会立马出现2时，当光标离开输入框后会出现叠加，变成了0天4时0分。所以这样是不可行的，就想到使用离开光标的方法，这还是要使用到onChange来获取当前数字来实现转化。