如何验证是否已使用 Yup 验证设置状态？

Question

我正在使用 Yup 检查用户是否选择了一个字段（使用状态“groupSelected”设置）。 （该字段为必填字段）

<Formik initialValues={{title:'', group:{groupSelected}}}
                        enableReinitialize='true'      // since we are setting the formik initial value to state, this is required to update the initial value when state changes
                        onSubmit={values => console.log(values)}
                        validationSchema={validationSchema}

提交表单时，我能够很好地检索选定的值。但是，我不确定如何验证状态是否已实际设置。

    group: Yup.string().required()

我尝试使用上述方法，但我猜它不起作用，因为 groupSelected 不是字符串。

Answer 1

这是Formik 和yup 的基本示例。 你也可以试试这个方法。

示例：

import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .trim("spaces no t allowed")
    .strict()
    .required("Required"),
});

export const MyForm = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        firstName: "",
      }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, values, touched, setFieldValue, registerField }) => (
        <Form>
          <Field 
            name="firstName" 
          />
          {errors.firstName && touched.firstName ? (
            <div>{errors.firstName}</div>
          ) : null}
          <br />
          {JSON.stringify(errors)}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);