1

我正在使用 Formik/Yup 来验证表单，并且正在尝试验证生日。

这是我的表格：

let initialState = [
  // { dateOfBirth: "2019-05-07" },
  // { dateOfBirth: "2019-05-07" }
];
return (
  <div>
    <Formik
      initialValues={initialState}
      validationSchema={Schema}
      onSubmit={this.handleSubmit}
      render={({ handleSubmit, isSubmitting }) => (
        <Form onSubmit={handleSubmit}>
          {childrenToOrder.map((item, index) => {
            let borderBottom = `1px solid black`;
            // no border on the last item
            if (childrenToOrder.length - 1 === index) {
              borderBottom = "none";
            }
            return (
              <div
                key={index}
                style={{
                  marginBottom: `${scale.s4}rem`,
                  paddingBottom: `${scale.s4}rem`,
                  borderBottom: borderBottom
                }}
              >
                <h2
                  style={{
                    fontSize: "24px",
                    marginBottom: `${scale.s3 + scale.s1}rem`
                  }}
                >
                  {item.firstName}
                </h2>
                <Field
                  type="date"
                  label="Date of birth"
                  name={`${index}.dateOfBirth`}
                  placeholder="27/01/2000"
                  component={Input}
                />
              </div>
            );
          })}
          <button type="submit" disabled={isSubmitting}>
            Submit Form
          </button>
        </Form>

这是我的Scehma：

const Schema = Yup.object().shape([
  {
    dateOfBirth: Yup.date().required("Required")
  }
]);

当我 console.log 表单的值时，我得到以下信息：

[{dateOfBirth: "2019-05-07"}, {dateOfBirth: "2019-05-07"}]

那不应该工作吗？

我想要实现的是验证出生日期，因此必须在输入中输入日期。稍后我会想确保它不是将来的日期 - 但甚至还不能让验证工作！

有任何想法吗？

沙盒链接

4

0 回答 0