<!DOCTYPE>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="./js/react.js"></script>

        <script src="./js/react-dom.js"></script>

        <script src="./js/browser.min.js"></script>

        <style>

            *{ margin:0px;  padding:0px;}

        </style>

    </head>

    <body>

        <div id="dome"></div>

        <div id="test"></div>

        <script type="text/babel">

            var Fix = React.createClass({

                getInitialState:function(){

                    return{

                        user:''

                    }

                },

                handleChange:function(e){

                    this.setState({

                        user:e.target.value.toUpperCase()

                    })

                },

                render:function(){

                    return(

                        <div>

    验证码：<input type="text" name="user" value={this.state.user} onChange={this.handleChange} />1f5Q

                        </div>

                    );

                }

            });

            ReactDOM.render(

                <Fix />,

                document.getElementById('dome')

            );

        </script>

    </body>

</html>

夺命雷公狗-----React---20--实现验证码大写的更多相关文章

  1. 夺命雷公狗—angularjs—20—$watch监听的用法

  2. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  4. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  6. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 夺命雷公狗-----React---3--标签的规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 夺命雷公狗-----React---2--组建

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HTLM5表单

    1.HTML5占位符文本   使用placeholder可以给文本框,搜索框添加提示性文本 <input type="text" name="url" p ...

  2. php 获取域名等Url

    <?php //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<br />"; //获取网页地址 echo $_SERVER['PH ...

  3. Oracle ITL(Interested Transaction List)理解

    ITL(Interested Transaction List) ITL是位于数据块头部的事物槽列表,它是由一系列的ITS(Interested Transaction Slot,事物槽)组成,其初始 ...

  4. 服务器中配置多个Tomcat及内存溢出配置

    1.更改server.xml文件中端口(启动.关闭端口) 2.在startup.bat文件开头加上 SET JAVA_HOME=C:\Program Files (x86)\Java\jdk1.8.0 ...

  5. 【转】ACM博弈知识汇总

    博弈知识汇总 转自:http://www.cnblogs.com/kuangbin/archive/2011/08/28/2156426.html 有一种很有意思的游戏,就是有物体若干堆,可以是火柴棍 ...

  6. 实战java虚拟机的学习计划图（看懂java虚拟机）

    啥也不说了,实战java虚拟机,好好学习,天天向上!针对自己的软肋制定学习计划. 一部分内容看完,自己做的学习笔记和感想. 学java很简单,但懂java会有难度,如果你的工资还没超过1W,那是时候深 ...

  7. eclipse如何配置tomcat运行web项目时省略项目名称

    三个关键点,如图所示

  8. MVC中的一些坑

    1.@字符在.cshtml文件中不能启用 经过2个小时求解,发现是配置文件web.config中引用的namespace少了System.Web.Optimization,所以不能启用,因为创建的空的 ...

  9. python学习道路(day7note)(subprocess模块，面向对象)

    1.subprocess模块   因为方法较多我就写在code里面了,后面有注释 #!/usr/bin/env python #_*_coding:utf-8_*_ #linux 上调用python脚 ...

  10. PHP 获取两个日期之间的日期数组/月份数组

    function getEmptyArr($s_time,$e_time,$type){ $tmp = array(); if($type=='day'){ $s_time = strtotime($ ...