<!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. Linux下面桌面的安装

    挂载光盘后配置yum文件,配置后 使用yum grouplist 命令 查看组 用yum install '"GNOM桌面组 输入 init 5   即可进入桌面模式 0 关机  3命令行级 ...

  2. 使用PowerShell读取SharePoint里列表的内容

    1. 在https://www.microsoft.com/en-us/download/details.aspx?id=42038这里下载SharePoint Online Client Compo ...

  3. Apache Spark技术实战之9 -- 日志级别修改

    摘要 在学习使用Spark的过程中,总是想对内部运行过程作深入的了解,其中DEBUG和TRACE级别的日志可以为我们提供详细和有用的信息,那么如何进行合理设置呢,不复杂但也绝不是将一个INFO换为TR ...

  4. java swing文件内容检索工具

    Java相关技术 - 文件内容检索工具 拿到一个几百M甚至上G的project让你去学习 有时候你会想知道某个关键词是在哪个文件里 比如:spring MVC配置的@RequestMapping,你从 ...

  5. 使用配置文件来配置JDBC连接数据库

    1.管理数据库连接的Class 代码如下: package jdbcTest;import java.sql.Connection;import java.sql.DriverManager;impo ...

  6. xcode国际化工具genstrings体验总结

    genstrings是苹果推出的一个用于自动从代码的nslocalizedstring等提取生成国际化字符串的工具: xcode的国际化文件方案一直以来都不太智能,我记得很久以前.strings文件库 ...

  7. phpexcel 导出 科学计数问题

    今天在用php做excel导出的时候遇到了一个小问题,如图 单元格默认格式为常规格式,当数值过长时就会变成科学计数. 解决方法: 如果输出的excel的$data数据是手动添加的,那就在对应值得后面添 ...

  8. ubuntu下的时间设定（硬件时间，系统时间，本地时间）

    问题的来由是在这里: 在cron里设定任务是在凌晨6点执行,检查日志时发现时间总是不对,是在22点左右的时间执行的.研究发现,任务是在本地时间的6点执行了,但不知为什么syslog中的时间都是为utc ...

  9. ACM集训的第一题

    对于一群NP(2<=NP<=10)个要互送礼物的朋友,郭铮鹏要确定每个人送出的钱比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人 ...

  10. CMake undefined reference to `QTcpServer::QTcpServer(QObject*)'的解决

    1. 这是因为工程link不到network的库,因此除了要包含头文件    #include 之外,还需要在.pro文件中加入:    QT += network 2. 对于CMake,需添加Net ...