feat: finish formik

laoriy · Feb 23, 2024 · 7522ef8 · 7522ef8
1 parent 1110d4f
commit 7522ef8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 69 deletions.
diff --git a/5.react/formik/public/index.html b/5.react/formik/public/index.html
@@ -14,7 +14,6 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/5.react/formik/src/App.js b/5.react/formik/src/App.js
@@ -1,77 +1,13 @@
 import React from "react";
-import { useFormik } from "formik";
-import * as Yup from "yup";
+import SignupForm from "./SignupForm";
+import SignupFormFormik from "./SignupFormFormik";
 
-const SignupForm = () => {
-  // Pass the useFormik() hook initial form values and a submit function that will
-  // be called when the form is submitted
-  const formik = useFormik({
-    initialValues: {
-      username: "",
-      password: "",
-    },
-    onSubmit: (values) => {
-      console.log(values);
-    },
-    // validate: (values) => {
-    //   const errors = {};
-    //   if (!values.username) {
-    //     errors.username = "请输入用户名";
-    //   }
-    //   if (values.username.length > 15) {
-    //     errors.username = "用户名不能超过15位";
-    //   }
-    //   if (!values.password) {
-    //     errors.password = "请输入密码";
-    //   }
-    //   if (values.password.length < 6) {
-    //     errors.password = "密码不能少于6位";
-    //   }
-    //   return errors;
-    // },
-    validationSchema: Yup.object({
-      username: Yup.string()
-        .max(15, "用户名不能超过15位")
-        .required("请输入用户名"),
-      password: Yup.string().min(6, "密码不能少于6位").required("请输入密码"),
-    }),
-  });
-  return (
-    <form onSubmit={formik.handleSubmit}>
-      <label htmlFor="username">Email Address</label>
-      <input
-        id="username"
-        name="username"
-        type="text"
-        {...formik.getFieldProps("username")}
-      />
-      <p>
-        {formik.touched.username && formik.errors.username
-          ? formik.errors.username
-          : null}
-      </p>
-      <label htmlFor="password">Password</label>
-      <input
-        id="password"
-        name="password"
-        type="password"
-        {...formik.getFieldProps("password")}
-      />
-
-      <p>
-        {formik.touched.password && formik.errors.password
-          ? formik.errors.password
-          : null}
-      </p>
-
-      <button type="submit">Submit</button>
-    </form>
-  );
-};
 function App() {
   return (
     <div>
       <SignupForm />
+      <h2>Formik组件</h2>
+      <SignupFormFormik />
     </div>
   );
 }