react+ts+antd的Form登陆表单

Login.tsx组件内容

import React, { FC } from 'react'

import { Form, Input, Button } from 'antd'

import { LoginForm } from '@/types/Login'

import './index.less'

const Login: FC = () => {

  const onFinish = (values: LoginForm) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  return <div className='login-page'>
    <div className='form-box'>
      <Form
        className='form-ele'
        name="basic"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="用户名"
          name="name"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit"> Submit </Button>
        </Form.Item>
      </Form>
    </div>
    
  </div>
}

export default Login

typs Login 内容

/* 登陆页面所用 types */

interface LoginForm {
  name:string
  password:string
}

export type {
  LoginForm
}