react-hook-form如何将react-datetime本地时间转换为UTC的hh:mm:ss格式

两种处理方式都可以，根据你的业务场景选择即可：

1. 组件内部直接实现 #

适合需要在表单运行过程中实时使用UTC格式时间的场景（比如表单项联动、实时校验、实时展示转换后的值），修改Controller的render逻辑，在时间选择触发时直接把转换后的值存入表单状态：

<Controller
  name="timevar"
  control={control}
  render={({ field }) => (
    <Datetime
      {...field}
      timeFormat={"h:mm A Z"}
      dateFormat={false}
      value={field.value}
      onChange={(val) => {
        // react-datetime返回的val为moment实例，直接调用utc方法转换
        const utcTimeStr = val.utc().format("HH:mm:ss");
        field.onChange(utcTimeStr);
      }}
    />
  )}
/>

注意如果用这种方式，需要同步修改useForm的默认值为对应格式的字符串：

const { control, handleSubmit, watch } = useForm({
  defaultValues: {
    // 原代码拼写错误defaualtValues已修正，否则默认值不生效
    timevar: new Date(new Date().setHours(0,0,0,0)).toISOString().slice(11,19)
  }
});

2. onSubmit提交时统一处理 #

适合只有提交接口时才需要UTC格式的场景，表单运行过程中保留原生时间对象更方便做运算、比较，代码侵入性更低：

const onSubmit = (data) => {
  // 提交前转换格式
  const utcTimeStr = data.timevar.utc().format("HH:mm:ss");
  // 后续提交逻辑使用utcTimeStr即可
  console.log(utcTimeStr);
};

如果不想依赖moment的API，也可以用原生Date方法实现转换：

const getUtcHhmmss = (date) => {
  const hours = String(date.getUTCHours()).padStart(2, '0');
  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
  return `${hours}:${minutes}:${seconds}`;
}

内容的提问来源于stack exchange，提问作者Santhosh