前端项目实战214-react实现移动端控制界面设置

简介: 前端项目实战214-react实现移动端控制界面设置
import React, { useEffect, useState } from 'react';
import { Input, Button, Form, message } from 'antd';
import "./login.scss"
import { useForm } from 'antd/es/form/Form';
import { UserLogin } from "../sevices/codeing/codeing"
interface ILogin {
    onConfirm:()=>void
}
interface IUserInfo {
    username: string;
    password: string;
}
interface ILoginParams {
    username: string;
    tanant?: string;
    password: string;
}
const Login: React.FC<ILogin> = (props: any) => {
    const [user, setUser] = useState<IUserInfo>({ username: "", password: "" });
    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = useForm()
    useEffect(() => {
        //注册回车键
        let monitorKeyBoardEvent = (e: KeyboardEvent) => {
            if (e.code === "Enter") {
                handleLogin();
            }
        };
        document.addEventListener<"keydown">("keydown", monitorKeyBoardEvent);
        return () =>
            document.removeEventListener<"keydown">("keydown", monitorKeyBoardEvent);
    });
    const handleLogin = async () => {
        setSpinning(true);
        const data = await form.validateFields()
        const response = await UserLogin(data)
        if (response.code == 200) {
            message.success("登陆成功", 1);
            console.log(response.data,"responseresponse")
            localStorage.setItem("userId",JSON.stringify(response.data.user.userId))
            props.onConfirm()
            setSpinning(true);
        } else {
            setSpinning(false);
            message.warning(response.message);
        }
        console.log(response, "response")
    };
    return (
        <div className='Login'>
            <div className='Login_title'>PDA管理系统</div>
            <div className='Login_form'>
                <Form
                    name="menu"
                    form={form}
                >
                    <Form.Item
                        label="账号"
                        name="account"
                        rules={[{ required: false, message: '请输入账号' }]}
                    >
                        <Input placeholder="请输入账号" />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: false, message: '请输入密码' }]}
                    >
                        <Input placeholder="请输入密码" />
                    </Form.Item>
                </Form>
            </div>
            <div>
                <Button onClick={handleLogin}>登录</Button>
            </div>
        </div>
    );
}
export default Login

image.png

相关文章
|
11天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
39 9
|
6天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
15 3
|
8天前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
|
15天前
|
移动开发 前端开发 JavaScript
React 表单验证实战
【10月更文挑战第25天】本文介绍了 React 表单验证的常见方法,包括原生 HTML5 验证、自定义验证逻辑和第三方库(如 Formik 和 Yup)的使用。通过具体代码示例,详细讲解了每种方法的实现步骤,并探讨了常见问题和易错点及其解决方法。旨在帮助开发者提高表单验证的有效性和安全性。
52 8
|
16天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
32 2
|
16天前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
44 2
|
17天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
27 2
|
18天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
28 2
|
18天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
17天前
|
前端开发 Android开发 开发者
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第26天】近年来,React Native凭借其跨平台开发能力在移动应用开发领域迅速崛起。本文将探讨React Native的优势与挑战,并通过示例代码展示其应用实践。React Native允许开发者使用同一套代码库同时构建iOS和Android应用,提高开发效率,降低维护成本。它具备接近原生应用的性能和用户体验,但也面临平台差异、原生功能支持和第三方库兼容性等挑战。
28 0