62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { NodeNextRequest } from "next/dist/server/base-http/node";
|
|
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
|
|
style={{
|
|
display: "grid",
|
|
placeItems: "center",
|
|
alignItems: "center",
|
|
minHeight: "100vh",
|
|
}}
|
|
>
|
|
<div>
|
|
<input
|
|
style={{
|
|
margin: "0.5em",
|
|
padding: "0.5em",
|
|
borderRadius: "0.39em",
|
|
}}
|
|
placeholder="你的名字..."
|
|
value={inputUser}
|
|
onChange={(event) => setInputUser(event.target.value)}
|
|
size={10}
|
|
/>
|
|
<button
|
|
style={{
|
|
margin: "0.5em",
|
|
padding: "0.5em",
|
|
backgroundColor: "#39ceff",
|
|
}}
|
|
onClick={() => {
|
|
if (inputUser.trim() === "") {
|
|
alert("姓名不能为空");
|
|
return;
|
|
}
|
|
setUser(inputUser.trim());
|
|
setBegin(true);
|
|
localStorage.setItem("user", inputUser.trim());
|
|
}}
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{begin && children}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserInputWrap;
|