wrap user input component

components/UserInputWrap.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+const UserInputWrap = ({ children, setUser }) => {
+  const [inputUser, setInputUser] = React.useState("");
+  const [begin, setBegin] = React.useState(false);
+
+  React.useEffect(() => {
+    setInputUser(localStorage.getItem("user") || "");
+  }, []);
+
+  return (
+    <>
+      {!begin && (
+        <div>
+          <input
+            placeholder="在这输你的名字"
+            value={inputUser}
+            onChange={(event) => setInputUser(event.target.value)}
+          />
+          <button
+            onClick={() => {
+              if (inputUser.trim() === "") {
+                alert("姓名不能为空");
+                return;
+              }
+              setUser(inputUser.trim());
+              setBegin(true);
+              localStorage.setItem("user", inputUser.trim());
+            }}
+          >
+            Login
+          </button>
+        </div>
+      )}
+      {begin && children}
+    </>
+  );
+};
+
+export default UserInputWrap;

pages/index.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import Head from "next/head";
 import Timetable from "@/components/Timetable";
+import UserInputWrap from "@/components/UserInputWrap";
 
 export default function Home() {
   const [user, setUser] = React.useState("");
-  const [begin, setBegin] = React.useState(false);
-
-  React.useEffect(() => {
-    setUser(localStorage.getItem("user") || "");
-  }, []);
 
   return (
     <>
@@ -19,29 +15,9 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        {!begin && (
+        <UserInputWrap setUser={setUser}>
-          <div>
+          <Timetable user={user} />
-            <input
+        </UserInputWrap>
-              placeholder="在这输你的名字"
-              value={user}
-              onChange={(event) => setUser(event.target.value)}
-            />
-            <button
-              onClick={() => {
-                if (user.trim() === "") {
-                  alert("姓名不能为空");
-                  return;
-                }
-                setUser(user.trim());
-                setBegin(true);
-                localStorage.setItem("user", user);
-              }}
-            >
-              Login
-            </button>
-          </div>
-        )}
-        {begin && <Timetable user={user} />}
       </main>
     </>
   );