Formik 和 Yup 验证

Question

所以我在我制作的多步骤表单上进行 Yup 和 Formik 验证时遇到了一些麻烦。 我试图在验证为真时启用按钮，禁用它是否再次变为假。 我希望它是假的，而没有写任何东西，如果是的话，它必须是 2 个字符或更多。

const pages = [<Page1 />, <Page2 />, <Page3 />, <Page4 />];

const SignupSchema = Yup.object().shape({
  kg: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Reqasduired"),
  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Required"),
  email: Yup.string()
    .email("Invalid email")
    .required("Required")
});

const SignUp = () => {
  const state = useSelector((state: RootState) => state);
  const dispatch = useDispatch();

  return (
    <>
      <Logo />
      <div className="signup-container">
        <Formik
          initialValues={{ kg: "", lastName: "", email: "" }}
          onSubmit={values => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
            }, 500);
          }}
          validationSchema={SignupSchema}
        >
          {({ isValid, errors, touched }) => (
            <Form>
              <LinearProgress variant="determinate" />
              <div className="questions">{pages[state]}</div>

              <button
                type="button"
                onClick={() => {
                  dispatch(decrement());
                }}
              >
                Prev
              </button>
              <button
                type="submit"
                disabled={isValid}
                onClick={() => {
                  pages.length - 1 <= state
                    ? console.log("No more pages")
                    : dispatch(increment());
                }}
              >
                Next
              </button>
            </Form>
          )}
        </Formik>
      </div>
    </>
  );
};

Answer 1

有两件事你必须改变。 首先将提交按钮中的 prop 更改为disabled={!isValid}以便它在无效时被禁用，而不是在它有效时被禁用。

然后将validateOnMount <Formik>添加到<Formik>以确保它在安装时验证并且您的按钮将被禁用（当初始值无效时）。

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

const SignupSchema = Yup.object().shape({
  kg: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Reqasduired"),
  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Required"),
  email: Yup.string()
    .email("Invalid email")
    .required("Required")
});

export default function App() {
  return (
    <Formik
      initialValues={{ kg: "", lastName: "", email: "" }}
      validateOnMount={true}
      onSubmit={values => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500);
      }}
      validationSchema={SignupSchema}
    >
      {props => {
        const { isValid } = props;
        return (
          <Form>
            <label>KG: </label>
            <Field name="kg" />
            <br />
            <label>Last name: </label>
            <Field name="lastName" />
            <br />
            <label>Email: </label>
            <Field name="email" type="email" />
            <br />
            <button type="submit" disabled={!isValid}>
              Next
            </button>
            <pre>{JSON.stringify(props, null, 2)}</pre>
          </Form>
        );
      }}
    </Formik>
  );
}

或者一个工作沙箱。