如何使用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）。将Material UI组件（基于功能方法）转换为基于ES6类的组件。

2）。如果没有简单的方法来处理Point＃1，那么我想将基于ES6类的组件（例如，提供的代码）转换为Pure react组件（基于功能方法）

谢谢

Answer 1

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

此外，loginRequest似乎是一个还原动作。如果要在组件中作为道具的一部分来访问它，则需要使用connect()将其转换为连接的组件，然后使用mapDispatchToProps。或者，您可以使用useDispatch钩子来调度redux操作。

这是应该编写submit方法的一种方式（使用useDispatch钩子：]]

const dispatch = useDispatch()

const submit = (values) => {
  dispatch(loginRequest(values));
}; 
并且在表单上，​​您需要将submit方法绑定到onSubmit事件

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