作为一个Vue用户,是时候扩展一下React了,从引入antd、配置less、router,终于实现了一个简单的登录表单。 代码如下: import React from 'r
作为一个Vue用户,是时候扩展一下React了,从引入antd、配置less、router,终于实现了一个简单的登录表单。
代码如下:
import React from 'react';
import { Input, Button, message } from "antd";
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import './index.less'
class Login extends React.Component{
constructor(props) {
super(props)
this.state = {
username: '',
passWord: ''
}
};
submit=()=>{
if (this.state.username !== '' && this.state.password !== '') {
this.props.history.push('/Index')
} else {
message.error("用户名和密码不能为空")
}
};
user_change=(e)=>{
this.setState({
username: e.target.value
})
}
password_change=(e)=>{
this.setState({
password: e.target.value
})
}
render () {
const {username, password} = this.state
return (
<div className="login">
<Input
value={username}
onChange={this.user_change}
size="large"
placeholder="用户名"
prefix={<UserOutlined />} />
<Input.Password
value={password}
onChange={this.password_change}
size="large"
className="login__input"
placeholder="密码"
prefix={<LockOutlined />}
iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
/>
<Button
className="login__btn"
size="large"
type="primary"
onClick={this.submit}
>
登录
</Button>
</div>
);
}
}
export default Login;
到此这篇关于React实现登录表单的示例代码的文章就介绍到这了,更多相关React 登录表单内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React实现登录表单的示例代码
本文链接: https://www.lsjlt.com/news/122919.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0