即使在 select datepicker 中的值之后，React DateTimePicker 也會顯示所需的錯誤

Question

即使在 DatePicker 中選擇一個值后，React DateTimePicker 仍顯示必需的錯誤：

const validationForm = Yup.object().shape({
  DateTime:Yup.date().required('Date and time is required')
});

<DateTimePicker {...register('DateTime')}/>

Answer 1

這里來自 react form hook form 的寄存器 function 可能不支持第 3 方庫 react datetimepicker。

對於這些類型的組件，我們可以使用 React 鈎子形式的 Control 組件來包裝自定義組件以進行驗證。

對於前。

import React from "react";
import ReactDatePicker from "react-datepicker";
import { TextField } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

function App() {
  const { handleSubmit, control } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
          />
        )}
      />
      
      <input type="submit" />
    </form>
  );
}

有關更多信息，請參閱 react hook form 的官方文檔。 React Hook 表單控件