×

react开发小TIPS:登录表单的简单应用

作者:天空2021.04.13来源:Web前端之家浏览:403评论:0
关键词:react

react开发小TIPS:登录表单的简单应用。

0.jpg

代码如下:

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;

放到编辑器里试试吧!!!

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/react20210413a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

  • 这个版本,能不能作为个人系统使用,有没有什么不同...

  • Web前端之家

    现在基本都是jsonp的呀,json很少,不过处理方式都差不多。如有问题加QQ群。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria