React Button 使用onClick 定义 antd 登录页面

作为小白学习react 前端，而且对es6的语法很多还是生疏的，平时熟悉的onclick 事件，在react中居然调试了很久，到最后才成功的调用了函数，本次算作是一次笔记，来记录react onclick 事件对应函数的调用和定义：

<Button type="primary" className="login_btn" onClick={this.userLogin}>登录</Button>

上面是点击登录按钮 到时候去调用userLogin 这个函数：

		userLogin=e=>{
			console.log("用户开始登录");
		}

所有代码如下：

UserLogin.js

import React from 'react'
import 'antd/dist/antd.css';
import '@/css/userLogin.css';
import history from '@/components/history/History.js'
import { Input,Card,Button,Row} from 'antd';

import { 
	     UserOutlined,
         EyeTwoTone,
		 EyeInvisibleOutlined
} from '@ant-design/icons';

export default class UserLogin extends React.Component{
	    handleSubmit = (e) => {
	        history.push({pathname:'/index',state:{}});
	    }
		userLogin=e=>{
			console.log("用户开始登录");
		}
	    render() {
	        return (
                 <Row justify="center" align="middle" className="login_site_ground">
				      <Card  title="用户登录" className="login_card">
				       <Input placeholder="用户名/手机/邮箱"  suffix={<UserOutlined />} className="login_user_input"/>
				       <br/>
				       <Input.Password
				        className="login_user_password"
				        placeholder="请输入密码"
				        iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
				         />
						 <br/>
				        <Button type="primary" className="login_btn" onClick={this.userLogin}>登录</Button>
			          </Card> 
					</Row>
	        );
		}
}

userLogin.css

.login_site_ground{
	background-image: url(../images/dlbg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	height: 100%;
	width: 100%;
	position: absolute;
}
.login_card{
	width: 300px;
	height: 250px;
    
}
.login_card .ant-card-head{
	min-height: 40px;
}
.login_user_input{
	width:250px;
	margin-bottom:20px;	
}

.login_user_password{
	width:250px;
	margin-bottom:20px;	
}
.login_btn{
	width:240px;
}
.ant-card-head-title{
	padding:9px 0px;
}

效果如下：

 react 小白学习中.....

希望对你有所帮助