作为小白学习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 小白学习中.....
希望对你有所帮助