reactjs - 如何从 react-datepicker 获取日期值以注册 react-hook-form

Question

我正在使用 react-datepicker 和 react-hook-form 制作带有所需生日字段的注册表单。单击 onSubmit 按钮后，所有数据都记录在控制台中，除了birthDate（为空）。如何从 react-datepicker 获取日期值以注册 react-hook-form？

注册表单界面

export interface RegistrationForm {
  username: string;
  birthDate: Date;
  email: string;
  password: string;
  passwordConfirm: string;
}

const {register, handleSubmit, formState: {errors}, watch, control } = useForm<RegistrationForm>()

const onSubmit = async (data: RegistrationForm) => {
            console.log(data)
}

const [selectedBirthDate, setSelectedBirthDate] = useState<Date>(new Date()) 
      
      const handleDateChange = (date: Date | null) => {
            if(date != null)  {
                  setSelectedBirthDate(date)
            }
      }

在我的控制器标签中

                             <Controller
                                    name={"birthDate"}
                                    control={control}
                                    defaultValue={selectedBirthDate}
                                    render={({field}) => {
                                          return(
                                                <DatePicker
                                                      onChange={(date: Date) => handleDateChange(date)}
                                                      selected={selectedBirthDate}
                                                      placeholderText="Enter your birth date"
                                                />
                                          )
                                    }}
                              />

用户名表格

                              <input 
                                    type="text" 
                                    placeholder="username" 
                                    {...register("username", {
                                          required: true, 
                                          maxLength: 20,
                                          minLength: 5 
                                    })}
                              />

标签： reactjstypescriptreact-hook-form

Answer 1

您忘记将您的<Controller />与<DatePicker />组件链接起来。因此，至少使用value并将onChange其传递给<DatePicker />道具很重要。

<Controller
  name={"birthDate"}
  control={control}
  defaultValue={new Date()}
  render={({ field: { onChange, value } }) => {
    return (
      <DatePicker
        onChange={onChange}
        selected={value}
        placeholderText="Enter your birth date"
      />
    );
  }}
/>

如果您使用 RHF，您也不需要useState处理您的状态更改，因为 RHF 将为您处理这些更改。

更新

要显示错误，您需要errorsRHF 通过formState属性提供的对象。但是您需要先创建一个验证规则：您可以在 RHF 提供的规则和自定义规则之间进行选择，请参阅此处了解更多信息（请不要混淆，您可以在 文档下找到规则register，因为register和<Controller />具有相同验证规则的接口）。

然后，您可以使用rules来自 的道具添加规则<Controller />。例如，我添加了一个验证来检查所选日期是否超过 2 年。为了显示错误，我使用了<ErrorMessage />包提供的组件@hookform/error-message，但您也可以检查是否errors.birthDate存在并显示您自己的自定义错误消息。

const sub2Years = subYears(2);

const isOlderThan2Years = (date) =>
  isBefore(sub2Years(new Date()), date) || "Date is not older than 2 years";

<Controller
  name={"birthDate"}
  control={control}
  defaultValue={new Date()}
  rules={{ validate: { isOlderThan2Years } }}
  render={({ field: { onChange, value } }) => {
    return (
      <DatePicker
        onChange={onChange}
        selected={value}
        placeholderText="Enter your birth date"
      />
    );
  }}
/>
<ErrorMessage
  errors={errors}
  name="birthDate"
  render={({ message }) => <p>{message}</p>}
/>