我的目标是将现有的登录页面重构为实质性的UI登录页面。
下面是我现有的登录组件，标题为“ Navbar.js”。如您所见，状态是在此文件中管理的，还包括对SQL db /用户身份验证/等的axios调用...
我的目标是将现有的登录页面代码重构为我找到的重要的UI登录页面。我是新来的反应（状态）和实质性用户界面的人，因此非常感谢您的帮助！如果我可以提供更多材料或进行重组，以便更轻松地进行处理，请随时告诉我。谢谢！
Navbar.js（我现有的登录页面）
import React, { useState } from "react";
import axios from "axios";
async function attemptLogin(un, pw, setSignedIn, signedIn) {
try {
if (signedIn) {
window.localStorage.setItem("jwt", "");
setSignedIn(false);
return;
}
const response = await axios.post("http://localhost:4000/login", {
username: un,
password: pw,
});
console.log(response);
if (response.data.jwt) {
setSignedIn(true);
window.localStorage.setItem("jwt", response.data.jwt);
}
} catch (error) {
console.log(error);
}
}
export default function Navbar({
signedIn,
setSignedIn,
setAllPlaylists,
allPlaylists,
fetchPlaylists,
}) {
const defaultValue = {
un: "",
pw: "",
};
const [signInForm, setSignInForm] = useState(defaultValue);
return (
<>
Username:
<input
value={signInForm.un}
onChange={(event) =>
setSignInForm({ ...signInForm, un: event.target.value })
}
/>
Password:
<input
value={signInForm.pw}
onChange={(event) =>
setSignInForm({ ...signInForm, pw: event.target.value })
}
type="password"
/>
<button
onClick={() => {
attemptLogin(signInForm.un, signInForm.pw, setSignedIn, signedIn);
setSignInForm({ ...defaultValue });
}}
>
{signedIn ? "Sign Out" : "Sign In"}
</button>
<button onClick={fetchPlaylists}>
{!allPlaylists ? "Show only my playlists" : "Show all playlists"}
</button>
</>
);
}
SignIn.js（一个包含重要的UI登录布局的新文件）
import React from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center",
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignIn() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Username"
name="username"
autoComplete="username"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
{/* <Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid> */}
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
);
}
答案 0 :(得分：0)
用不完整的代码很难测试。我尽力重构它。可以对其进行更多重构。还更新了沙箱。
import React, { useState } from "react";
import axios from "axios";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
// import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
}
}));
async function attemptLogin(un, pw, setSignedIn, signedIn) {
try {
if (signedIn) {
window.localStorage.setItem("jwt", "");
setSignedIn(false);
return;
}
const response = await axios.post("http://localhost:4000/login", {
username: un,
password: pw
});
console.log(response);
if (response.data.jwt) {
setSignedIn(true);
window.localStorage.setItem("jwt", response.data.jwt);
}
} catch (error) {
console.log(error);
}
}
export default function SignIn({
signedIn,
setSignedIn,
setAllPlaylists,
allPlaylists,
fetchPlaylists
}) {
const classes = useStyles();
const defaultValue = {
un: "",
pw: ""
};
const [signInForm, setSignInForm] = useState(defaultValue);
return (
<Container component="main" maxWidth="xs">
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Username"
name="username"
autoComplete="username"
autoFocus
value={signInForm.un}
onChange={(event) =>
setSignInForm({ ...signInForm, un: event.target.value })
}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
value={signInForm.pw}
onChange={(event) =>
setSignInForm({ ...signInForm, pw: event.target.value })
}
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={() => {
attemptLogin(signInForm.un, signInForm.pw, setSignedIn, signedIn);
setSignInForm({ ...defaultValue });
}}
>
{signedIn ? "Sign Out" : "Sign In"}
</Button>
<Grid container>
{/* <Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid> */}
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}