React实现登录表单的示例代码

作为一个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 登录表单内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！