如何使用 React Material UI 组件对我的用户进行身份验证?

Question

我在应用程序中使用 ReactJs，我需要验证/验证我的应用程序用户。

我想通过 redux-saga 库为用户验证添加一些逻辑。

当任何人输入一些无效数据时，验证消息应显示字段。

import React from 'react';
import history from './history';
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 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';

import { reduxForm, Field } from 'redux-form'
import { connect } from 'react-redux'
// import { Link } from 'react-router'
import Messages from '../notifications/Messages'
import Errors from '../notifications/Errors'
import PropTypes from "prop-types";

import loginRequest from './actions/login'
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),
},
}));

const handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted!');
}
export default function Login(props) {
const classes = useStyles();
const {
handleSubmit, // remember, Redux Form injects this into our props
login: {
requesting,
successful,
messages,
errors,
},
} = props
// Remember, Redux Form passes the form values to our handler
// In this case it will be an object with `email` and `password`
// submit = (values) => {
//   this.props.loginRequest(values)
// }
// Pass the correct proptypes in for validation
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>
{/* noValidate */}
<form className={classes.form} onSubmit={handleSubmit(this.submit)} >
<TextField
variant="outlined"
margin="normal"
required
fullWidth            
id="email"
label="Email Address"
name="email"
autoComplete="email"
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>             
</form>
</div>      
</Container>
);
}

Login.propTypes = {
handleSubmit: PropTypes.func,
loginRequest: PropTypes.func,
login: PropTypes.shape({
requesting: PropTypes.bool,
successful: PropTypes.bool,
messages: PropTypes.array,
errors: PropTypes.array,
}),
};

我从这里获取了身份验证的示例代码：

https://github.com/jcolemorrison/redux-sagas-authentication-app/blob/login/src/login/index.js

Application built with
{
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-saga": "^1.1.3"
}

我面临的问题是在将 ES6 组件类转换为材料 Ui 纯反应组件(基于函数方法(时出现错误。两者都有很多差异。

目前我在转换后遇到错误，但在转换过程中可能会出现更多错误。

submit = (values) => {
this.props.loginRequest(values)
}

我尝试遵循指南并查找示例实现，但找不到解决问题的推荐方法。

我面临拖曳重大问题

1(. 将材质UI组件(基于功能方法(转换为基于ES6类的组件。

2(. 如果 point#1 没有简单的方法，那么我想将(示例中提供的代码(基于 ES6 类的组件转换为纯反应组件(基于函数方法(

谢谢

Answer 1

如果您使用的是功能组件，则没有类属性，因此不能使用this。

此外，loginRequest似乎是一个重复操作。如果要在组件中访问它作为其 props 的一部分，则需要使用connect()将其转换为连接的组件，并使用mapDispatchToProps。或者，您可以使用useDispatch挂钩来调度 redux 操作。

这是编写提交方法的一种方式(使用useDispatch钩子(：

const dispatch = useDispatch()
const submit = (values) => {
dispatch(loginRequest(values));
}; 

在窗体上，需要将submit方法绑定到onSubmit事件

<form className={classes.form} onSubmit={submit} >