使用react-hook-form的React-datepicker验证

Question

我想使用react-hook-form验证react-datepicker，当我尝试它时，它不适合我，验证消息也不会显示。有可能把ref内的日期picker ?

这是我使用的react-hook-form版本。

"react-hook-form"^ 6.15.8"

这是我的代码

import React from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function Account() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({ mode: "all" });
const [birthdate, setBirthdate] = useState(null);
return (
<div className="flex flex-col mx-5 my-2 space-y-2">
<DatePicker
className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
type="birthdate"
name="birthdate"
placeholderText="Birthdate"
selected={birthdate}
dateFormat="yyyy-MM-dd"
onChange={(date) => {
setBirthdate(date);
}}
peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select"
closeOnScroll={true}
disabledKeyboardNavigation
ref={register({
required: {
value: true,
message: "*Birthdate is required",
},
})}
/>
{errors.birthdate && (
<p className="text-red-600 text-sm cursor-default">
{errors.birthdate.message}
</p>
)}
</div>
)
}
export default Account

对于CSS，我使用顺风CSS框架。

Answer 1

根据react-hook库，您可以使用register函数注册输入并根据需要设置它:

{...register("birthdate", {
required: true
})}

我在代码沙箱中测试了它，在日期选择时，有一个关于未定义的变量访问的错误。为了解决这个问题，有一个隐藏的输入来保存日期值，以允许对表单提交进行检查。尝试删除它并将寄存器移动到DatePicker组件。

import React, { useState, useRef } from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function Account() {
const inputRef = useRef();
const {
register,
handleSubmit,
formState: { errors }
} = useForm();
const onSubmit = (data) => {
console.log(data);
};
const [birthdate, setBirthdate] = useState("");
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col mx-5 my-2 space-y-2">
<DatePicker
className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
type="birthdate"
name="birthdate"
placeholderText="Birthdate"
dateFormat="yyyy-MM-dd"
selected={birthdate}
onChange={(date) => setBirthdate(date)}
peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select"
closeOnScroll={true}
disabledKeyboardNavigation
/>
<input
ref={inputRef}
value={birthdate}
type="hidden"
{...register("birthdate", {
required: true
})}
/>
{errors.birthdate && (
<p className="text-red-600 text-sm cursor-default">
Birthdate is required
</p>
)}
</div>
<input type="submit" />
</form>
);
}
export default Account;

Answer 2

我将其包装在react-hook-form控制器中，然后添加了一个隐藏的Form.Control，以便错误信息可以馈送并显示到Form.Control.Feedback。

注意openingDay，在我的例子中，我需要它是动态名称，这就是为什么我把它放在一个变量中。在大多数情况下，您可以使用点运算符访问您提供的errors属性名称，例如errors.yourControllerName.

<Controller
name={openingDay}
control={control}
isInvalid={!!errors[openingDay]}
rules={{ required: 'Opening time is required' }}
render={({ field: { onChange, value } }) => {
return (
<DatePicker
onChange={onChange}
selected={value}
placeholderText="Select Opening Time..."
disabled={!enabled}
className="form-control"
timeIntervals={30}
dateFormat="h:mm aa"
showTimeSelect
showTimeSelectOnly
/>
);
}}
/>
<Form.Control
type="hidden"
isInvalid={!!errors[openingDay]}
/>
<Form.Control.Feedback type="invalid">
{errors[openingDay] && errors[openingDay].message}
</Form.Control.Feedback>

Answer 3

你试过使用控制器吗?这是一个基于我过去是如何做的例子

import React from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function Account() {
const {
control,
handleSubmit,
formState: { errors },
} = useForm({ mode: "all" });
return (
<div className="flex flex-col mx-5 my-2 space-y-2">
<Controller
control={control}
name="birthdate"
render={({ field }) => (
<DatePicker
className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
name="birthdate"
placeholderText="Birthdate"
selected={field.value}
dateFormat="yyyy-MM-dd"
onChange={field.onChange}
peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select"
closeOnScroll={true}
disabledKeyboardNavigation
/>
)}
/>
{errors.birthdate && (
<p className="text-red-600 text-sm cursor-default">
{errors.birthdate.message}
</p>
)}
</div>
)
}
export default Account

这里是Controller使用的官方文档链接。我希望这能解决你的问题，如果你还有疑问，请告诉我。

Answer 4

react-hooks-form工作正常试试!

import React from 'react';
import { useState,useEffect,useRef,useMemo,useCallback } from 'react';
import DatePicker from "react-datepicker";

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate]     = useState(new Date());

let submitdata = {startDate,endDate};
const submitform = async() => {             
await DataService.myapi({submitdata})
.then(res => {

let response = res.data;
})
}
return (
<>
<DatePicker selected={startDate}  maxDate={new Date()} className="form-control" onChange={(date) => setStartDate(date)} />
<DatePicker selected={endDate}  maxDate={new Date()} className="form-control"  onChange={(date) => setEndDate(date)} /> </>)