哎，算了。直接上代码吧，不懂得私聊我把

<!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写的一个小小的登录验证密码组件的更多相关文章

  1. 使用 python 编写一个授权登录验证的模块

    使用 python 编写一个授权登录验证的模块 我们编写的思路: 1.登录的逻辑:如果用户名和密码正确,就返回 token . 2.生成 token 的逻辑,根据用户名,随机数,当前时间 + 2 小时 ...

  2. Flask 编写一个授权登录验证的模块(一)

    看一个关于授权登陆的简易模块,觉得挺不错,学习学习. 1.登录的逻辑:如果用户名和密码正确,就返回 token .2.生成 token 的逻辑,根据用户名,随机数,当前时间 + 2 小时3.然后放在 ...

  3. Flask 编写一个授权登录验证的模块(二)

    本篇比上一篇多了重定向的功能 #!/usr/bin/env python # -*- coding: utf-8 -*- #python3 import base64 import random im ...

  4. python登录验证程序

    自己写的一个python登录验证程序: 基础需求: 让用户输入用户名密码 认证成功后显示欢迎信息 输错三次后退出程序 升级需求: 可以支持多个用户登录 (提示,通过列表存多个账户信息) 用户3次认证失 ...

  5. react写一个todo

    概述 最近学习redux,打算先复习一下react,所以用react写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  6. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  7. django 从零开始 8 用户登录验证 待测

    看文档 djang 自带一个用户登录验证的方法,不过有些看着懵逼,去网上找了一圈,发现很多都是照抄文档说明的,几乎没说啥原理 特别是 from django.contrib.auth import a ...

  8. Filter登录验证过滤器（全局）

    通过Filter来定义一个登录验证过滤器,这是就不需要在每一个JSP页面添加判断用户合法性的代码了. 以下示例中包含了5个文件,一个是登录表单LoginForm.jsp,一个是登录判断页LoginCo ...

  9. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

随机推荐

  1. python content list(1--4)

    part 1 python language 1. environment building and config 2. variable and data type 3. programming b ...

  2. Log4j和thymeleaf结合导致sql 日志输出不了

    最近用thymeleaf模板引擎的时候,发现sql 的日志输出不了,普通ssm框架搭建没问题,能输出sql日志,可是在使用thymeleaf引擎后,就发现用不了. 现在找到一种解决方法, 导入jar包 ...

  3. Redis学习之（一）

    Redis是一个开源,高级的键值存储和一个适用的解决方案,用于构建高性能,可扩展的Web应用程序. Redis有三个主要特点,使它优越于其它键值数据存储系统 - Redis将其数据库完全保存在内存中, ...

  4. activiti5.13工作流系列(一)-初识

    1.什么是工作流? 工作流就是让多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程,工作流由实体(Entity).参与者(Participant).流程定义(Flow Definition) ...

  5. Struts2- 设置默认拦截器

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  6. 常用PHP文件操作函数

    注:文件操作函数的行为受到 php.ini 中设置的影响. 当在 Unix 平台上规定路径时,正斜杠 (/) 用作目录分隔符.而在 Windows 平台上,正斜杠 (/) 和反斜杠 (\) 均可使用. ...

  7. QFTPERROR lists

  8. AWS SDK for C++调用第三方S3 API

    这里介绍AWS SDK for C++ 1.0.x版本,比如下载: https://github.com/aws/aws-sdk-cpp/archive/1.0.164.tar.gz 环境:RHEL/ ...

  9. C++（1）C++类四个默认函数---构造函数、析构函数、拷贝函数、赋值函数

    C++构造函数和析构函数 默认构造函数指不带参数或者所有参数都有缺省值的构造函数!!! (1)构造函数.析构函数与赋值函数 构造函数.析构函数与赋值函数是每个类最基本的函数.它们太普通以致让人容易麻痹 ...

  10. 第三百节，python操作redis缓存-其他常用操作，用于操作redis里的数据name，不论什么数据类型

    python操作redis缓存-其他常用操作,用于操作redis里的数据name,不论什么数据类型 delete(*names)根据删除redis中的任意数据类型 #!/usr/bin/env pyt ...