如何使用 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)。如果第 1 点没有简单的方法，那么我想将（在示例中提供的代码）基于 ES6 类的组件转换为 Pure react 组件（基于功能方法）

谢谢

Answer 1

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

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

这是提交方法的一种编写方式（使用useDispatch 挂钩）：

const dispatch = useDispatch()

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

在您的表单上，您需要将submit 方法绑定到onSubmit 事件

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