react Hooks做登录表单

import React,{useState,useEffect} from  'react';
import * as ant from 'antd';
import { login } from '../../unit/api';


const LOGN0000 = (props:any) => {
   //定义变量
    const [loginInfo, setLoginInfo] = useState({
         userName: '',
        userPassword: '',
    })
    //双向绑定数据
    const onchange = (e: any) => {
        setLoginInfo({
            ...loginInfo,
            [e.target.name]:e.target.value
      })
    }
    // 请求接口
const getLogin=()=> {
        login({loginInfo}, {}).then((res: any) => {
            console.log(res);
        })
    }
    return (
        <div>
            <ant.Input type="text" value={loginInfo.userName} name="userName" onChange={(e)=>{onchange(e)}}  placeholder="输入用户ID"></ant.Input>
            <ant.Input.Password value={loginInfo.userPassword} name="userPassword" onChange={(e)=>{onchange(e)}} placeholder="输入用户密码"></ant.Input.Password>
            <br />
            <ant.Button onClick={()=>{getLogin()}}>登录</ant.Button> 
      </div>
    )
}
export default LOGN0000