使用react-hook-form的watch时设置IonDatetime默认值的问题

问题核心 #

1. IonDatetime默认时间未遵循minuteValues的5分钟增量限制
2. 给IonDatetime硬编码value设置合法默认值后，配合react-hook-form的watch函数会导致无法修改该值

解决方案 #

1. 通过React Hook Form初始化默认值

在useForm初始化时配置defaultValues，将符合minuteValues限制的时间设为字段初始值，替代直接给IonDatetime设置静态value：

const { register, watch, setValue } = useForm({
  defaultValues: {
    birthTime: "2022-09-23T15:00" // 必须是minuteValues包含的分钟值
  }
});

2. 绑定表单状态到IonDatetime的value

移除IonDatetime上的静态value属性，改为绑定watch监听的表单字段值，确保组件值与表单状态同步：

<IonDatetime
  min="2022-09-18T12:23"
  max="2022-10-12T17:22"
  value={birthTime} // 绑定watch返回的字段值
  minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
  // ...其他属性
/>

3. 调整 onChange 逻辑确保格式正确

确保onIonChange中转换的时间格式符合要求，避免格式错误导致的状态不同步：

onIonChange={(ev) => {
  if (ev.detail.value) {
    setValue(
      "birthTime",
      dateFormat(new Date(ev.detail.value), "yyyy-mm-dd'T'HH:MM")
    );
  }
}}

修改后的完整代码示例 #

import { useForm } from "react-hook-form";
import { format, parseISO } from "date-fns";
import { IonItem, IonLabel, IonText, IonModal, IonContent, IonDatetime, IonButton } from "@ionic/react";
import dateFormat from "dateformat";

export default function FormPage() {
  const { register, watch, setValue } = useForm({
    defaultValues: {
      birthTime: "2022-09-23T15:00"
    }
  });
  const birthTime = watch("birthTime");

  return (
    <IonItem {...register("birthTime")} button={true} id="open-datetime">
      <IonLabel>Birth time</IonLabel>
      {birthTime !== "" ? (
        <IonText>{format(parseISO(birthTime!), "dd MM yyyy HH:mm")}</IonText>
      ) : (
        <IonText className="placeholder">Select a date</IonText>
      )}

      <IonModal trigger="open-datetime">
        <IonContent>
          <IonDatetime
            min="2022-09-18T12:23"
            max="2022-10-12T17:22"
            value={birthTime}
            minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
            onIonChange={(ev) => {
              if (ev.detail.value) {
                setValue(
                  "birthTime",
                  dateFormat(new Date(ev.detail.value), "yyyy-mm-dd'T'HH:MM")
                );
              }
            }}
          />
          <IonButton onClick={() => document.querySelector("ion-modal")?.dismiss()}>
            Close
          </IonButton>
        </IonContent>
      </IonModal>
    </IonItem>
  );
}

关键说明 #

• 避免直接给IonDatetime设置静态value，完全由React Hook Form管理表单状态，消除状态冲突
• 初始默认值必须严格符合minuteValues的限制，确保初始显示合法
• 通过watch监听字段时，组件会随表单状态自动更新，不会出现无法修改值的情况

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