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;