From 1110d4ffd12f0292569ff2ddd645881024ca4ee7 Mon Sep 17 00:00:00 2001
From: laoriy <1161612005@qq.com>
Date: Wed, 21 Feb 2024 23:01:28 +0800
Subject: [PATCH] feat: use formik

---
 5.react/formik/package.json   |  3 +-
 5.react/formik/pnpm-lock.yaml | 29 +++++++++++++++++
 5.react/formik/src/App.js     | 61 +++++++++++++++++++++++++++++------
 3 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/5.react/formik/package.json b/5.react/formik/package.json
index 137833c..92252d8 100644
--- a/5.react/formik/package.json
+++ b/5.react/formik/package.json
@@ -10,7 +10,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.3"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/5.react/formik/pnpm-lock.yaml b/5.react/formik/pnpm-lock.yaml
index 781836f..6f60908 100644
--- a/5.react/formik/pnpm-lock.yaml
+++ b/5.react/formik/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
   web-vitals:
     specifier: ^2.1.4
     version: 2.1.4
+  yup:
+    specifier: ^1.3.3
+    version: 1.3.3
 
 packages:
 
@@ -8651,6 +8654,10 @@ packages:
       react-is: 16.13.1
     dev: false
 
+  /property-expr@2.0.6:
+    resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
+    dev: false
+
   /proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -9953,6 +9960,10 @@ packages:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
     dev: false
 
+  /tiny-case@1.0.3:
+    resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
+    dev: false
+
   /tiny-warning@1.0.3:
     resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
     dev: false
@@ -9978,6 +9989,10 @@ packages:
     engines: {node: '>=0.6'}
     dev: false
 
+  /toposort@2.0.2:
+    resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
+    dev: false
+
   /tough-cookie@4.1.3:
     resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
     engines: {node: '>=6'}
@@ -10070,6 +10085,11 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+    dev: false
+
   /type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -10841,3 +10861,12 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: false
+
+  /yup@1.3.3:
+    resolution: {integrity: sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==}
+    dependencies:
+      property-expr: 2.0.6
+      tiny-case: 1.0.3
+      toposort: 2.0.2
+      type-fest: 2.19.0
+    dev: false
diff --git a/5.react/formik/src/App.js b/5.react/formik/src/App.js
index c9661b6..72b8fd2 100644
--- a/5.react/formik/src/App.js
+++ b/5.react/formik/src/App.js
@@ -1,27 +1,68 @@
 import React from "react";
 import { useFormik } from "formik";
+import * as Yup from "yup";
 
 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: {
-      email: "",
+      username: "",
+      password: "",
     },
     onSubmit: (values) => {
-      alert(JSON.stringify(values, null, 2));
+      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="email">Email Address</label>
+      <label htmlFor="username">Email Address</label>
       <input
-        id="email"
-        name="email"
-        type="email"
-        onChange={formik.handleChange}
-        value={formik.values.email}
+        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>
@@ -29,9 +70,9 @@ const SignupForm = () => {
 };
 function App() {
   return (
-    <h2>
+    <div>
       <SignupForm />
-    </h2>
+    </div>
   );
 }