react-hook-form v6.15.8校验react-datepicker不生效、提示不显示如何解决？

问题原因 #

react-datepicker是封装后的第三方自定义组件，不是原生的<input>表单元素，react-hook-form的register方法默认仅支持原生表单DOM元素的注册，直接绑定到DatePicker的ref上无法拿到组件内部的输入值，所以校验逻辑不会触发，错误也无法正常抛出。

适配v6.x版本的解决方案 #

你需要用react-hook-form提供的Controller组件做桥接，专门用来适配自定义组件的表单注册、校验逻辑，修改后的代码如下：

import React from "react";
import { useForm, Controller } from "react-hook-form"; // 引入Controller
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function Account() {
  const {
    control, // 必须传入Controller的属性
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "all" });

  // 无需本地维护birthdate state，交给react-hook-form托管状态即可
  const onSubmit = (data) => {
    console.log("表单提交数据：", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col mx-5 my-2 space-y-2">
      <Controller
        name="birthdate"
        control={control}
        rules={{
          required: {
            value: true,
            message: "*Birthdate is required",
          },
        }}
        render={({ field: { onChange, value } }) => (
          <DatePicker
            className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
            placeholderText="Birthdate"
            selected={value} // 绑定Controller返回的value
            dateFormat="yyyy-MM-dd"
            onChange={onChange} // 绑定Controller返回的onChange，自动同步值到react-hook-form
            peekNextMonth
            showMonthDropdown
            showYearDropdown
            dropdownMode="select"
            closeOnScroll={true}
            disabledKeyboardNavigation
          />
        )}
      />
      {errors.birthdate && (
        <p className="text-red-600 text-sm cursor-default">
          {errors.birthdate.message}
        </p>
      )}
      <button type="submit">提交表单</button>
    </form>
  )
}

export default Account

补充说明 #

选完日期后会自动触发你配置的校验规则，表单值会统一由react-hook-form管理，不需要自己做状态同步，错误信息可以正常通过errors.birthdate拿到。

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