使用React写的一个小小的登录验证密码组件
哎，算了。直接上代码吧，不懂得私聊我把
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有条件的渲染</title>
<script src="./bower_components/react/react.production.min.js"></script>
<script src="bower_components/react/react-dom.production.min.js"></script>
<script src="bower_components/babel/browser.js"></script>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/babel">
function Info(props) {
if(!props.open){
return null
}
return (
<p>{props.text}</p>
)
}
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {text: "",resultText:"",open:false};
} changeText(event) {
this.setState({text: event.target.value})
} changeStatus() {
this.setState({open: true})
if (!this.state.text) {
this.setState({
resultText:"您还未登录"
})
} else if (this.state.text == "123456") {
this.setState({
resultText:"您好，您已登录"
}
)
} else {
this.setState({
resultText:"不好意思，密码错误"
})
}
}
render(){
return (
<div>
<input placeholad="请输入您的密码" type="text" value={this.state.text} onChange={e => this.changeText(e)}/>
<button onClick={this.changeStatus.bind(this)} >点击登录</button>
<Info text={this.state.resultText} open={this.state.open}></Info>
</div>
)
} }
ReactDOM.render(
<Login/>,
document.getElementById("test")
)
</script>
</html>
使用React写的一个小小的登录验证密码组件的更多相关文章
- 使用 python 编写一个授权登录验证的模块
使用 python 编写一个授权登录验证的模块 我们编写的思路: 1.登录的逻辑:如果用户名和密码正确,就返回 token . 2.生成 token 的逻辑,根据用户名,随机数,当前时间 + 2 小时 ...
- Flask 编写一个授权登录验证的模块(一)
看一个关于授权登陆的简易模块,觉得挺不错,学习学习. 1.登录的逻辑:如果用户名和密码正确,就返回 token .2.生成 token 的逻辑,根据用户名,随机数,当前时间 + 2 小时3.然后放在 ...
- Flask 编写一个授权登录验证的模块(二)
本篇比上一篇多了重定向的功能 #!/usr/bin/env python # -*- coding: utf-8 -*- #python3 import base64 import random im ...
- python登录验证程序
自己写的一个python登录验证程序: 基础需求: 让用户输入用户名密码 认证成功后显示欢迎信息 输错三次后退出程序 升级需求: 可以支持多个用户登录 (提示,通过列表存多个账户信息) 用户3次认证失 ...
- react写一个todo
概述 最近学习redux,打算先复习一下react,所以用react写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:
- Vue.js写一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- django 从零开始 8 用户登录验证 待测
看文档 djang 自带一个用户登录验证的方法,不过有些看着懵逼,去网上找了一圈,发现很多都是照抄文档说明的,几乎没说啥原理 特别是 from django.contrib.auth import a ...
- Filter登录验证过滤器（全局）
通过Filter来定义一个登录验证过滤器,这是就不需要在每一个JSP页面添加判断用户合法性的代码了. 以下示例中包含了5个文件,一个是登录表单LoginForm.jsp,一个是登录判断页LoginCo ...
- Vue.js实现一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
随机推荐
- python学习笔记（13）--向文件夹插入课文朗读
说明: 1. 2016年初刚学python写的一段代码,找到了一个walk函数,研究了半天.文件复制粘贴,研究了半天.正则匹配,研究了半天,期间被斜杠差点搞死.后来做完了跟CZ炫耀,他说python里 ...
- wpf treeview中的两个事件
使用模板HierarchicalDataTemplate <HierarchicalDataTemplate x:Key="BookMarkTemplate" > &l ...
- list集合绑定在datagridview上时如何实现排序
List<Person> lst = new List<Person>(); lst.Add(new Person("A", "1")) ...
- 【Unity/Kinect】使用KinectManager的一般流程
想要从Kinect读取到数据,然后使用数据,通常是以下流程: using UnityEngine; using System.Collections; /// <summary> /// ...
- Postgres数据库备份与还原命令
备份 pg_dump.exe -c -b -E UTF8 -U postgres -h 127.0.0.1 -p 5432 -f "f:\testdb001.bak" testdb ...
- 网卡phy9161A
硬件1. 网口网口使用4根信号线:两根发送,两根接收.一对信号线中一根承载0——+2.5V信号电压,而另一根负载的电压是0——-2.5V,因此可产生一个5Vpp的信号差.RJ45中有用的就是4根信号线 ...
- VMware 14 Pro 安装 CentOS 7
今年准备好好学习一下.NET CORE了,那也是得学习Linux.然后又得学习更多,咬着牙干吧... 1.Vmware虚拟机安装 在windows平台,首先咱们得先安装Vmware虚拟机,步骤省略,一 ...
- 也谈谈js的压缩，jquery压缩。【转】
问题缘由: 负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面 ...
- selenium测试（Java）（三）
控制浏览器: http://www.cnblogs.com/moonpool/p/5657752.html
- Linux ad7606 驱动
Linux中已经移植好了ad7606,位于driver/staging/iio/adc/目录中.只要在板级文件中添加device中即可. 移植参考文档: https://wiki.analog.com ...