React：使用输入的出生日期作为死亡日期的最小值

Question

由于一个人不会在 he/she 出生之前死去，因此为这些日期设定最小值和最大值是有意义的。但是我无法从第一个输入中获取值，我得到一个值为空的错误。（使用 react-hooks-form 包，不要认为这些信息很重要但你永远不知道）

<div className="form-section">
            <label>Date of birth <span style={{ color: "red " }}>*</span>:</label>
            {errors.Name && errors.Name.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.Name && errors.Name.type === "required" && (
              <span style={{ color: "red " }}>Required!</span>
            )}
            <input
              min={document.getElementById("BD").value}
              max={moment().format("YYYY-MM-DD")}
              type="date"
              name="DateOfDeath"
              ref={register({ required: true })}
            />
          </div>

感谢您的帮助！如果需要，我可以添加额外的信息。

Answer 1

由于问题中的代码包含不完整的结构，我在这里根据我的理解进行格式化。如果你能在codesandbox上提供一个工作示例，那将是一个很大的帮助。

您需要使用来自 react-hook-form 的 watch。

const MyComponent = () => {
  const {
    register,
    errors,
    watch,
  } = useForm();
  
  const dateOfBirth = watch('BirthDate', new Date()); // Added new date to default to Today in case if DOB is not selected.
  
  return (
    <div className="form-section">
      <label>Date of birth <span style={{ color: "red " }}>*</span>:</label>
      {errors.Name && errors.Name.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.Name && errors.Name.type === "required" && (
        <span style={{ color: "red " }}>Required!</span>
      )}
      <input
        min={dateOfBirth}
        max={moment().format("YYYY-MM-DD")}
        type="date"
        name="DateOfDeath"
        ref={register({ required: true })}
      />
    </div>)
}

React：使用输入的出生日期作为死亡日期的最小值

React: Use the date of birth input as a minimum for the date of death

javascript

reactjs

react-hooks

react-hook-form