如何驗證是否使用 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>
);