如何使用 React Material UI 组件验证我的用户？

Question

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

我想通过 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 组件 class 转换为 material Ui 纯 React 组件（基于函数方法）时出现错误。两者都有很多差异。

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

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

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

我面临两个主要问题

1).将 Material UI 组件（基于功能方法）转换为基于 ES6 class 的组件。

2).如果第 1 点没有简单的方法，那么我想将（示例中提供的代码）基于 ES6 class 的组件转换为纯反应组件（基于功能方法）

谢谢

Answer 1

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

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

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

const dispatch = useDispatch()

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

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

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

如何使用 React Material UI 组件验证我的用户？

How to authenticate my user with React Material UI components?

reactjs

redux-saga

react-hooks