网站地图    收藏    合作   

主页 > 前端 > react >

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

来源:自学PHP网    时间:2021-04-06 15:18 作者:小飞侠 阅读:

[导读] React实现登录表单的示例代码...

今天带来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 (
 
} /> } iconRender={visible => (visible ? : )} />
); } } export default Login;

到此这篇关于React实现登录表单的示例代码的文章就介绍到这了,更多相关React 登录表单内容请搜索自学php网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学php网!


以上就是关于React实现登录表单的示例代码全部内容,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论