React项目 antd4登录表单

最新推荐文章于 2024-04-30 09:20:11 发布

GreyPencil

最新推荐文章于 2024-04-30 09:20:11 发布

阅读量675

点赞数

分类专栏： JavaWeb 文章标签： node.js reactjs java

本文链接：https://blog.csdn.net/GreyPencil/article/details/113800464

版权

这篇博客讲述了作者在升级React项目中从antd3过渡到antd4时遇到的挑战，特别是关于form表单和登录功能的实现。通过实例代码分享了具体的问题及解决方案。

摘要由CSDN通过智能技术生成

antd3 到antd4 爬过的坑：

1. form表单，登录

话不多说，直接上代码

import React, {Component, useState, useEffect} from 'react'
import './login.less'
import logo from '../../assets/images/logo.png'
import {Form, Input, Button, Checkbox, message} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import {reqLogin, reqAddUser} from '../../api'
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import {Redirect} from 'react-router-dom'

/*
登录的路由组件
 */

const onFinishFailed = (error) => {
    alert('Failed:', error);
};

class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    onFinish = async (values) => {
        //进行表单验证，打印语句模仿表单验证
        console.log('Received values of form: ', values);

        //提交请求之后需要调用的函数
        const {username, password} = values
        const result = await reqLogin(username, password) // {status: 0, data: user}  {status: 1, msg: 'xxx'}
        // console.log('请求成功', result)

        if (result.status === 0) { // 登陆成功
            // 提示登陆成功
            message.success('Sign in succeed')