如何解决具有React Hook表单和Yup模式验证的Elastic UI DatePicker
我正在尝试将弹性ui datepicker与react hook形式和Yup模式验证集成在一起。我知道默认情况下,Yup date模式正在寻找常规的js Date或可以这样解析的字符串,而弹性ui datepicker接受并输出其日期的时刻。因此,我尝试向日期架构添加一个转换器,以将值解析为片刻。当我尝试此操作时,它永远不会注册我为该日期选择了任何内容,并且变压器也永远不会运行。这是一个示例:
import React,{ useState } from "react";
import styled from "styled-components";
import {
EuiButton,EuiForm,EuiFormRow,EuiFieldText,EuiPage,EuiPageBody,EuiPageContent,EuiPageHeader,EuiTitle,EuiPageHeaderSection,EuiDatePicker,} from "@elastic/eui";
import { useForm } from "react-hook-form";
import { usedispatch } from "react-redux";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import moment from "moment";
import { addUser } from "./logic";
const Container = styled.div`
text-align: initial;
`;
const momentSchema = yup.date().clone().transform(function (value,originalValue) {
if (this.isType(value)) {
return value;
}
value = moment(originalValue);
return value.isValid() ? value.toDate() : new Date("");
});
export const FormsPage = () => {
const schema = yup.object().shape({
firstName: yup.string().required(),lastName: yup.string().required(),email: yup.string().email().required(),dob: momentSchema.required(),});
const [dob,setdob] = useState();
const { errors,handleSubmit,register } = useForm({
resolver: yupResolver(schema),});
const dispatch = usedispatch();
const ondobChange = (date) => {
setdob(date);
};
const onSubmit = (data) => {
dispatch(addUser(data));
};
return (
<Container>
<EuiPage>
<EuiPageBody>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="1">
<h1>Forms</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiForm
component="form"
onSubmit={handleSubmit(onSubmit)}
novalidate
>
<EuiFormRow
label="First Name"
isInvalid={!!errors.firstName}
error={errors.firstName?.message}
>
<EuiFieldText
name="firstName"
inputRef={register}
isInvalid={!!errors.firstName}
/>
</EuiFormRow>
<EuiFormRow
label="Last Name"
isInvalid={!!errors.lastName}
error={errors.lastName?.message}
>
<EuiFieldText
name="lastName"
inputRef={register}
isInvalid={!!errors.lastName}
/>
</EuiFormRow>
<EuiFormRow
label="Email"
isInvalid={!!errors.email}
error={errors.email?.message}
>
<EuiFieldText
name="email"
inputRef={register}
isInvalid={!!errors.email}
/>
</EuiFormRow>
<EuiFormRow
label="Date of Birth"
isInvalid={!!errors.dob}
error={errors.dob?.message}
>
<EuiDatePicker
name="dob"
inputRef={register}
isInvalid={!!errors.dob}
selected={dob}
onChange={ondobChange}
/>
</EuiFormRow>
<EuiFormRow>
<EuiButton type="submit" fill>
Submit
</EuiButton>
</EuiFormRow>
</EuiForm>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</Container>
);
};
这是发生了什么: Date is Required
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。