具有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 (将#修改为@）