React表单只读输入框未触发值检测问题求助

问题根源 #

你遇到的问题核心在于React Hook Form（RHF）依赖输入元素的onChange/onBlur事件同步表单值到内部状态，但你的日期输入框设置了readOnly，且值由外部日历组件通过dates数组控制——这些受控值的变化不会触发输入框的原生事件，导致RHF的表单状态始终认为字段为空，进而触发必填校验错误，直到输入框获得焦点触发onBlur才会同步值。

可行解决方案 #

方案1：主动同步外部值到RHF表单状态 #

使用RHF提供的setValue方法，在dates数组变化时主动更新对应的表单字段值，确保RHF内部状态和外部日期值保持一致，同时触发校验更新错误提示。

代码示例：

import { useForm, useEffect } from "react-hook-form";
import { useState } from "react";

function YourFormComponent() {
  const { register, setValue, formState: { errors } } = useForm();
  const [dates, setDates] = useState([null, null]); // 你的日期状态

  // 监听dates变化，同步到RHF表单并触发校验
  useEffect(() => {
    // 同步开始日期
    const startDateVal = dates[0] ? dates[0].toLocaleDateString("fr-CA") : "";
    setValue("startDate", startDateVal, {
      shouldValidate: true, // 同步后立即校验
      shouldDirty: true // 标记字段为已修改
    });

    // 同步结束日期
    const endDateVal = dates[1] ? dates[1].toLocaleDateString("fr-CA") : "";
    setValue("endDate", endDateVal, {
      shouldValidate: true,
      shouldDirty: true
    });
  }, [dates, setValue]);

  // 输入框移除手动传入的value，交由RHF控制
  return (
    <form>
      <Input
        label="Start Date"
        {...register("startDate", {
          required: { value: true, message: "This field is required." },
        })}
        onClick={() => toast.error("Use the calendar to select a start date")}
        type="date"
        readOnly
        error={typeof errors.startDate?.message === "string" ? errors.startDate?.message : ""}
      />

      {/* 结束日期输入框写法同理 */}
    </form>
  );
}

方案2：调整校验触发时机（可选） #

如果不想主动同步值，也可以在注册字段时指定仅在提交时触发校验，让RHF直接读取输入框当前的受控值：

{...register("startDate", {
  required: { value: true, message: "This field is required." },
  trigger: "onSubmit" // 仅在表单提交时触发校验
})}

注意：该方案可靠性低于方案1，若用户未触发任何输入框交互，提交时仍可能出现校验异常。

补充说明 #

你的Input组件写法无问题，{...props}已正确传递RHF的注册事件，核心矛盾是只读输入框无法触发原生事件同步状态。方案1的setValue参数shouldValidate和shouldDirty能确保同步值后立即更新校验状态，避免错误提示残留。

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