<!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. 【BZOJ3282】Tree LCT

    1A爽,感觉又对指针重怀信心了呢= =,模板题,注意单点修改时splay就好,其实按吾本意是没写的也A了,不过应该加上能更好维护平衡性. ..还是得加上好= = #include <iostre ...

  2. 为什么angularjs使用ui-router时要使用html5Mode?

    为什么我们要在使用angular ui-router时要使用html5Mode=true这个呢? 在angular中,你在访问链接时,可能访问的链接为"#/link". 如果你设置 ...

  3. React native 的弹出层（输入）效果

    /*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...

  4. linux系统中批量查找文件与文件内容的方法

    在linux中查看与修改文件权限我们都必须使用命令来操作,不能像windows一样点几下就好了,下面我们简单的介绍一下linux中的相关命令 比如查找当前目录下面所有的php文件里面某个关键字 fin ...

  5. HDU2527 哈夫曼编码

    Safe Or Unsafe Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  7. 如何激活win10 win10激活工具下载

    http://www.2cto.com/os/201511/448815.html 官方的win10出来了,可是装在上电脑后要花钱才能用,费用要好几百呢,感觉很不值得,这里我教给大家个免费激活官方wi ...

  8. javaScript中的空值和假值

    javaScript中有五种空值和假值,分别为false,null,undefined,"",0.从广义上来说,这五个值都是对应数据类型的无效值或空值. 这五个值的共同点是在执行i ...

  9. VS2010/VS2013中ashx代码折叠的问题

    Tools->Options->TextEditor->File Extension Add ashx Microsoft Visual C# Apply OK 重启VS就可以了,效 ...

  10. static{ }语句块详解

    static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法.举ge例子: public class Test { public static i ...