如何无需onChange，在React Hook Form中基于日期更新晚数字段

完全可以不用在input上单独写onChange事件，React Hook Form的register配置对象本身就支持onChange回调，你可以把计算晚数的逻辑直接写在这个配置里，让代码更内聚。

修改后的实现代码 #

import "./styles.css";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, getValues, setValue } = useForm();

  return (
    <div className="App">
      <form>
        <label>起始日期</label>
        <input
          type="date"
          id="startDate"
          {...register("startDate", {
            required: "此字段为必填项",
            onChange: (e) => {
              const endDate = getValues().endDate;
              if (!endDate) return;
              const nights = Math.floor(
                (new Date(endDate) - new Date(e.target.value)) / (1000 * 60 * 60 * 24)
              );
              setValue("numNights", nights > 0 ? nights : "");
            }
          })}
        />

        <label>结束日期</label>
        <input
          type="date"
          id="endDate"
          {...register("endDate", {
            required: "此字段为必填项",
            validate: (value) => {
              const startDate = getValues().startDate;
              if (startDate && value <= startDate) {
                return "结束日期必须晚于起始日期";
              }
            },
            onChange: (e) => {
              const startDate = getValues().startDate;
              if (!startDate) return;
              const nights = Math.floor(
                (new Date(e.target.value) - new Date(startDate)) / (1000 * 60 * 60 * 24)
              );
              setValue("numNights", nights > 0 ? nights : "");
            }
          })}
        />

        <label>晚数</label>
        <input type="text" id="numNights" readOnly {...register("numNights")} />
      </form>
    </div>
  );
}

关键说明 #

1. 逻辑内聚到register配置：把原本单独的onChange回调直接放到register的第二个参数配置对象中，不用在input元素上额外挂载onChange属性，完全符合你的需求。
2. 边界情况处理：计算晚数前先判断另一个日期是否已填写，避免无效计算；同时确保只有正数晚数才赋值，避免结束日期早于起始日期时出现负数结果。
3. 保留原有校验逻辑：结束日期的validate规则完全保留，不影响表单的校验功能。

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