หากฉันมีสององค์ประกอบ องค์ประกอบหนึ่งมีตัวแปร formData อยู่ (องค์ประกอบการเข้าสู่ระบบหลัก) และอีกองค์ประกอบหนึ่งที่เก็บแบบฟอร์มนั้นเอง (นำมาจาก React วัสดุ UI) ฉันจะสามารถเชื่อมต่อทั้งสององค์ประกอบได้อย่างไร หากฉันต้องการ เลยเหรอ? เนื่องจากในตอนนี้ โทเค็น jwt ของฉันถูกสร้างขึ้นบนแบ็กเอนด์ของ Node แต่ดูเหมือนว่าการจัดส่งจะไม่ต้องการส่ง response.data ออกไป
import React, { Fragment, useState } from "react";
import { connect } from "react-redux";
import { login } from "../../actions/auth";
import SignIn from "../../material/SignIn";
const Login = ({ login, isAuthenticated }) => {
const [formData, setFormData] = useState({
email: "",
password: ""
});
const { email, password } = formData;
const onChange = e => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const onSubmit = e => {
login(email, password);
};
// Redirect if logged in
if (isAuthenticated) {
return <Redirect to="/dashboard" />;
}
return (
<Fragment>
<SignIn
email={email}
password={password}
onSubmit={onSubmit}
onChange={onChange}
isAuthenticated={isAuthenticated}
/>
</Fragment>
);
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(
mapStateToProps,
{ setAlert, login }
)(Login);
และองค์ประกอบ SignIn
คือ:
import React, { useState } 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";
function MadeWithLove() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{"Built with love by the "}
<Link color="inherit" href="https://material-ui.com/">
Material-UI
</Link>
{" team."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
"@global": {
body: {
backgroundColor: theme.palette.common.white
}
},
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({ email, password, onChange, onSubmit }) {
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 onSubmit={e => onSubmit(e)} className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
onChange={e => onChange(e)}
fullWidth
id="email"
label="Email Address"
name="email"
value={email}
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
onChange={e => onChange(e)}
fullWidth
name="password"
label="Password"
type="password"
value={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="/th#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="/th#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<MadeWithLove />
</Box>
</Container>
);
}
ฉันจะสามารถเชื่อมต่อองค์ประกอบ SignIn กับองค์ประกอบเข้าสู่ระบบได้อย่างไร
SignIn
กับร้านค้า? ดูเหมือนว่าLogin
สามารถส่งข้อมูลทั้งหมดที่ต้องการผ่านอุปกรณ์ประกอบฉากได้ หากstate.auth.isAuthenticated
ไม่อัปเดต อาจเป็นปัญหากับคำขอหรือกระบวนการตรวจสอบสิทธิ์ของคุณ - person Tomer   schedule 05.06.2019