自定义包含天时分的时长选择器组件

场景：项目是react+antd 实现的。如果传感器超过3天4小时没有上报数据，则认为设备已经坏了，需要发出告警。 3天4小时这是由用户在前端页面输入的，因此需要有一个时长选择器。antd 原生的TimePicker 组件只能实现选择 时、分、秒，不符合我项目场景中需要最长7天的需求。

因此基于antd 的 原生组件 封装自定义了新的组件。

你可以使用 Ant Design 的 TimePicker 组件和 InputNumber 组件来实现时长选择器，可以选择天、时、分的时长。具体实现方式如下：

import { TimePicker, InputNumber } from 'antd';
import moment from 'moment';
import { useState } from 'react';

function DurationPicker() {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);

  const handleDaysChange = value => {
    setDays(value);
  };

  const handleHoursChange = value => {
    setHours(value);
  };

  const handleMinutesChange = value => {
    setMinutes(value);
  };

  const handleTimeChange = (time, timeString) => {
    setHours(parseInt(timeString.split(':')[0]));
    setMinutes(parseInt(timeString.split(':')[1]));
  };

  const handleBlur = () => {
    setDays(Math.min(Math.max(days, 0), 30));
    setHours(Math.min(Math.max(hours, 0), 23));
    setMinutes(Math.min(Math.max(minutes, 0), 59));
  };

  const duration = moment.duration({
    days,
    hours,
    minutes,
  });

  return (
    <div>
      <InputNumber
        min={0}
        max={30}
        defaultValue={0}
        onChange={handleDaysChange}
        onBlur={handleBlur}
      />
      天
      <InputNumber
        min={0}
        max={23}
        defaultValue={0}
        onChange={handleHoursChange}
        onBlur={handleBlur}
      />
      小时
      <InputNumber
        min={0}
        max={59}
        defaultValue={0}
        onChange={handleMinutesChange}
        onBlur={handleBlur}
      />
      分钟
      <TimePicker
        format="HH:mm"
        defaultValue={moment('00:00', 'HH:mm')}
        onChange={handleTimeChange}
      />
      <div>总时长：{duration.humanize()}</div>
    </div>
  );
}

在这个示例中，我们首先从 antd 中导入了 TimePicker 和 InputNumber 组件，以及 moment 库和 useState 钩子函数。然后，我们使用 useState 钩子函数定义了三个状态变量 days、hours 和 minutes，分别表示选择的天数、小时数和分钟数。我们还定义了三个回调函数 handleDaysChange、handleHoursChange 和 handleMinutesChange，分别用于处理天数、小时数和分钟数的变化事件。在这些回调函数中，我们使用 setDays、setHours 和 setMinutes 函数来更新状态变量的值。

接下来，我们定义了一个回调函数 handleTimeChange，用于处理时间的变化事件。在这个回调函数中，我们使用 parseInt 函数来将时间字符串解析为整数，并分别更新小时数和分钟数的状态变量的值。

然后，我们定义了一个回调函数 handleBlur，用于限制天数、小时数和分钟数的范围。在这个回调函数中，我们使用 Math.min 和 Math.max 函数来限制变量的值在指定范围内。最后，我们使用 moment.duration 函数创建了一个时长对象 duration，表示选择的总时长。我们在组件中返回了四个 InputNumber 组件和一个 TimePicker 组件，以及一个显示总时长的文本。

需要注意的是，在使用 InputNumber 组件时，需要安装 antd 库。可以使用以下命令安装 antd 库：

npm install antd

或者使用以下命令安装 antd 库的 TypeScript 类型定义：

npm install @types/antd

在使用 moment 库时，需要安装 moment 库和 moment-duration-format 库。可以使用以下命令安装这些库：

npm install moment moment-duration-format

或者使用以下命令安装这些库的 TypeScript 类型定义：

npm install @types/moment @types/moment-duration-format