使用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 ...
随机推荐
- Jar/War/Ear等包的作用与区别详解
以客户角度来看,jar文件就是一种封装格式,用户不需要知道jar包中有多少个.class格式的文件及每个文件中的功能与作用,也可以得到相应的访问的结果.java中除了jar格式还有war和ear等包文 ...
- rabbitmq系列(一)-基本概念理解
1.简介 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue protocol)的开源实现.AMQP高级消息队列,说白了就是一个开源的消息中间件.它能解决 ...
- 【C#】获取桌面分辨率宽高（是否包含任务栏）
原文转自:http://120.77.66.71/blog/?p=176 在使用WPF进行桌面APP开发时,通常需要用到屏幕分辨率以及屏幕的宽高进行界面的自适应显示. C#中,类SystemParam ...
- Android——TextView属性XML详解
Android_TextView属性XML详解 博客分类: android 属性名称 描述 android:autoLink 设置是否当文本为URL链接/email/电话号码/map时 ...
- 老生常谈：vim 配置
1.自动补全 插件名字:NeoComplCache 下载地址:http://www.vim.org/scripts/script.php?script_id=2620 配置:把文件直接复制到vimfi ...
- PHP框架之ThinkPHP项目CMS内容管理系统源码及开发手册视频
http://download.csdn.net/download/duguqing/4203042
- jquery实现简单瀑布流代码
测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...
- C++11 新特性：Lambda 表达式
参考文章:https://blogs.oracle.com/pcarlini/entry/c_1x_tidbits_lambda_expressions 或许,Lambda 表达式算得上是 C++ 1 ...
- 启动hadoop 2.6遇到的datanode启动不了
转自 http://blog.csdn.net/zhangt85/article/details/42078347 查看日志如下: 2014-12-22 12:08:27,264 INFO org.m ...
- Struts tags--Data tags
struts tags详解之<s:bean> Description Bean标签,当然需要一个JavaBean.它的属性值的操作是经由Bean标签中的参数属性来进行赋值.当然 ...