React中将出生日期输入值设为死亡日期最小限制时遇null值报错

问题原因 #

• 页面首次渲染时出生日期输入框还没挂载完成，直接调用document.getElementById("BD").value会拿到null触发报错
• 你已经使用了react-hook-form，完全不需要直接操作原生DOM获取输入值，不符合React的声明式写法
• 现有代码里的必填校验提示判断的是errors.Name，和两个日期字段的名称BirthDate、DateOfDeath不匹配，必填提示不会正常触发

修复方案 #

首先从react-hook-form的useForm返回对象中解构出watch方法，监听出生日期字段的实时值，用来动态设置死亡日期的最小值，修改后代码如下：

// 假设你原有代码的useForm调用是如下写法，补充解构watch即可
// const { register, handleSubmit, formState: { errors }, watch } = useForm()
// 新增这行监听BirthDate字段的实时值
const birthDate = watch("BirthDate");

<div className="form-section">
  <label>Date of birth <span style={{ color: "red" }}>*</span>:</label>
  {errors.BirthDate && errors.BirthDate.type === "required" && (
    <span style={{ color: "red" }}>Required!</span>
  )}
  <input
    max={moment().format("YYYY-MM-DD")}
    type="date"
    name="BirthDate"
    id="BD"
    ref={register({ required: true })}
  />
</div>

<div className="form-section">
  <label>Date of death <span style={{ color: "red" }}>*</span>:</label>
  {errors.DateOfDeath && errors.DateOfDeath.type === "required" && (
    <span style={{ color: "red" }}>Required!</span>
  )}
  <input
    min={birthDate || "1900-01-01"}
    max={moment().format("YYYY-MM-DD")}
    type="date"
    name="DateOfDeath"
    ref={register({ required: true })}
  />
</div>

如果你使用的是react-hook-form v7版本，把ref={register(规则)}的写法替换为{...register("字段名", {规则})}即可正常运行。

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