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

绝地灬酷狼 2022-09-11 04:12 134阅读 0赞

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

上面是点击登录按钮 到时候去调用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;
    }

效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16][]

react 小白学习中.....

希望对你有所帮助

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5piv5aSn5aS06bif_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2f59c7692c6f423ea45217d0f0e16ee2.png