如何解决如何将React登录组件重构为现有的材料UI登录组件?
我的目标是将现有的登录页面重构为实质性的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,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,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,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>
);
}
解决方法
用不完整的代码很难测试。我尽力重构它。可以对其进行更多重构。还更新了沙箱。
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,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,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,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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。