使用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 ...
随机推荐
- Thrift RPC框架介绍
u 简介 Thrift是一种开源的跨语言的RPC服务框架.Thrift最初由facebook公司开发的,在2007年facebook将其提交apache基金会开源了.对于当时的facebook来说创造 ...
- am335x ti SDK6.0 kernel 时钟源码文件记录
源码流程记录 板级文件开始 // arch/arm/mach-omap2/board-aplex_cmi_at101.c MACHINE_START(APLEX_CMI_AT101, "ap ...
- [Linux应用]Linux应用程序输出数据重定向到文件中
转自:http://blog.chinaunix.net/uid-20680966-id-4698387.html 目的是要让程序的printf的打印能重定向到某个文本中,ctrl+c强制退出后查看文 ...
- HTML——图片自动轮换和手动轮换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java——常用类的总结
package test; import java.util.ArrayList; import java.util.HashMap; import java.util.Set; public cla ...
- 信号值大于-75dBm时
dBm是一个表示功率绝对值的值,是以1mw为0dbm,公式dbm=10×lg(毫瓦数/1).所以,为负值 这个值越大,表示信号越好,如-70dbm信号比-90dbm好 信号值大于-75dBm时,说明 ...
- hive输出json字符串
目前没发现有什么方便的函数可以直接使用,只能使用concat来手工拼接. 注意将null的字段值转为空,使用nvl函数 如果将hql语句写在script.q文件里面如下: select concat( ...
- HBase shell 命令。
HBase shell 命令. 进入hbase shell console$HBASE_HOME/bin/hbase shell如果有kerberos认证,需要事先使用相应的keytab进行一下认证( ...
- 为什么手机无法执行应用? Values之谜
欢迎Follow我的GitHub, 关注我的CSDN, 精彩不断! CSDN: http://blog.csdn.net/caroline_wendy/article/details/68923156 ...
- e672. 缩放，剪取，移动，翻转缓冲图像
AffineTransform tx = new AffineTransform(); tx.scale(scalex, scaley); tx.shear(shiftx, shifty); tx.t ...