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

 更新时间:2021年04月06日 10:47:59   作者:乔路非  
这篇文章主要介绍了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 登录表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react-native 圆弧拖动进度条实现的示例代码

    react-native 圆弧拖动进度条实现的示例代码

    本篇文章主要介绍了react-native 圆弧拖动进度条实现的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react router4+redux实现路由权限控制的方法

    react router4+redux实现路由权限控制的方法

    本篇文章主要介绍了react router4+redux实现路由权限控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 30分钟带你全面了解React Hooks

    30分钟带你全面了解React Hooks

    Hooks是一种函数,该函数允许您从函数式组件 “勾住(hook into)”React状态和生命周期功能。Hooks在类内部不起作用 - 它们允许你无需类就使用 React。
    2021-05-05
  • React router动态加载组件之适配器模式的应用详解

    React router动态加载组件之适配器模式的应用详解

    这篇文章主要介绍了React router动态加载组件之适配器模式的应用 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • ReactJS实现表单的单选多选和反选的示例

    ReactJS实现表单的单选多选和反选的示例

    本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • react新版本生命周期钩子函数及用法详解

    react新版本生命周期钩子函数及用法详解

    这篇文章主要介绍了react新版本生命周期钩子函数及用法详解,本文通过示例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React Native项目框架搭建的一些心得体会

    React Native项目框架搭建的一些心得体会

    React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。接下来通过本文给大家分享React Native项目框架搭建的一些心得体会,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • React 组件渲染和更新的实现代码示例

    React 组件渲染和更新的实现代码示例

    这篇文章主要介绍了React-组件渲染和更新的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • React根据宽度自适应高度的示例代码

    React根据宽度自适应高度的示例代码

    本篇文章主要介绍了React根据宽度自适应高度的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React 组件转 Vue 组件的命令写法

    React 组件转 Vue 组件的命令写法

    本文先介绍两个框架的组件共性和不兼容的地方,再介绍react-to-vue的使用和原理,需要的朋友可以参考下
    2018-02-02

最新评论