使用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 ...
随机推荐
- VBA代码分行
如果是语句可以直接在要换行的位加一个空格一个下划: Dim MyPath As String, MyName As String, _ tmpPath As String 如果是字符串可以加以加一个空 ...
- java面试2
1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽 ...
- java获取当月的第一天和最后一天,获取本周的第一天和最后一天
/** * 获取指定日期所在周的第一天和最后一天,用下划线连接 * @param dataStr * @return * @throws ParseException */ public static ...
- Ubuntu 16.04使用git
Ubuntu 16.04安装git 安装完RabbitVCS之后,Android studio里git还是没法用,找不到git程序,git命令也找不到,说明没有安装git! sudo apt-get ...
- 【Unity】UGUI控件大小适配父容器
需求:需要把UGUI控件的尺寸调整到指定大小,如匹配至设计的分辨率.或者说想制定覆盖全屏的背景图片. 做法:将这个UGUI控件的RectTransform组件里的Anchor Presets设为预设的 ...
- linux 内核参数调整优化网络
Linux系统内核设置优化tcp网络,# vi /etc/sysctl.conf,添加以下内容 net.ipv4.tcp_syncookies = 1 表示开启SYN Cookies.当出现SYN等待 ...
- MongoDB（五）：MongoDB操作文档
本篇文章中将讲解如何使用MongoDB操作文档. 文档的数据结构和JSON基本一致,所有存储在集合中的数据都是BSON格式.BSON是一种类似json格式的一种二进制形式的存储格式,简称Binary ...
- Java-ThreadLocal，Java中特殊的线程绑定机制
在DRP项目中,我们使用了ThreadLocal来创建Connection连接,避免了一直以参数的形式将Connection向下传递(传递connection的目的是由于jdbc事务要求确保使用同一个 ...
- Timsort 算法
转载自:http://blog.csdn.net/yangzhongblog/article/details/8184707 Timsort是结合了合并排序(merge sort)和插入排序(inse ...
- 等待事件 wait event
衡量数据库状况, 优化数据库等 当一个进程连接到数据库后, 进程所经历的种种等待就开始被记录, 并且通过一系列的性能视图进行展示, 通过等待事件用户可以很快发现数据库的性能瓶颈, 从而进行针对性能的优 ...