如何解决如何使用反应表单钩子验证反应日期选择器
我正在为我的一个项目使用数据选择器并尝试使用 yup 进行验证。但我要显示一条错误消息,但在选择日期后它不会隐藏。非常感谢任何帮助。
这是我的架构
let schema = yup.object().shape({
expiry_date: yup.date().required("Please enter expiry date")
});
<Controller
name="expiry_date"
control={control}
render={({ field }) => (
<DatePicker {...field} selected={startDate} onChange={(date) => onDateChange(date)} />
)}
/>
{errors.expiry_date && <p className="error">{errors.expiry_date?.message}</p>}
解决方法
您的示例有点不完整,但我能够将日期选择器添加到 formik
表单中并且可以正常工作:
// DatePickerTest.tsx
import React from 'react';
import { FormkiValues,useFormik} from 'formik';
import * as yup from 'yup';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
interface IFormikValues {
// ... some other
expiry_date: Date;
}
const validationSchema = yup.object({
// ... some other
expiry_date: yup.date().required("Please enter expiry date")
});
const DatePickerText:React.FC = ():JSX.Element => {
const formik = useFormik<IFormikValues>({
initialValues: {
// ... some other
expiry_date: new Date()
},validationSchema,onSubmit: (values) => {
alert(JSON.stringify(values,null,2));
},});
return (
<div>
<form onSubmit={formik.handleSubmit}>
{/* some other fields */}
<DatePicker
id="expiry_date"
name="expiry_date"
selected={formik.values.expiry_date}
onChange={(date) => {
formik.setFieldValue('expiry_date',date);
}}
/>
{formik.errors.expiry_date && <p className="error">{formik.errors.expiry_date}</p>}
{/* some other fields */}
<button type="submit" disabled={formik.isSubmitting}>Submit</button>
</form>
</div>);
};
export default DatePickerTest;
Yuu 可能会检查您的日期值更新函数 onDateChange
是否正在更新表单值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。