前端项目实战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