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.PasswordclassName="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 小白学习中.....

希望对你有所帮助

React Button 使用onClick 定义 antd 登录页面相关推荐

使用Chakra-UI封装简书的登录页面组件（React）
要求:使用chakra ui和react 框架将简书的登录页面的表单封装成独立的可重用的组件使用到的API: 注册API 请求方式:POST 请求地址: https://conduit.produc ...
java antd实现登录,AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
react登录页面_「开源」React-Admin终极后台管理项目解决方案
前端chenghao大神的作品,页面非常完善漂亮,不折不扣的企业级作品.学习react的小伙伴不可错过的好东西. 功能模块首页完整布局换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块 ...
React后台管理系统-登录页面
登录页面 <div className="col-md-4 col-md-offset-4"> <div className=&qu ...
shiro-cas------自定义登录页面
我的自定义登录页(需要登录页面的,推荐给你们一个登陆页面地址) 我的项目结构: 学习过程参考官方文档https://apereo.github.io/cas/5.3.x/installation/Us ...
aspx.net响应点击事件(页面button的onclick事件)
aspx.net响应点击事件(页面button的onclick事件) aspx.net制作网页还是比较简单的,直接动态网页并且连接数据库都是so easy首先在页面代码片: <form id=& ...
SharePoint2013自定义登录页面
SharePoint默认创建的WebApplication是基于windows的身份验证模式,以弹出窗口方式进行身份输入登录.这种方式可能对于国内的企业用户来说感觉不是很友好.一般而言,我们会把这种登 ...
dva 打包多个html,使用dva+umi+antd构建页面（一）
使用dva+umi+antd构建页面首先确保安装npm或者yarnhtml 建立新应用首先建立应用目录node mkdir myapp && cd myapp 推荐使用 yarn ...
idea 启动界面导入项目_如何为您的项目启动有效的登录页面
idea 启动界面导入项目 by Christian-Peter Heimbach 通过克里斯蒂安·彼得·海姆巴赫如何为您的项目启动有效的登录页面 (How to launch an effecti ...

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

React Button 使用onClick 定义 antd 登录页面相关推荐

最新文章

热门文章