<!DOCTYPE html>

<html>

    <head>

        <title>React JS</title>

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

        <script src="../build_0.13/JSXTransformer.js"></script>

        <script>

            function dateToString(d){

                return [d.getFullYear(), d.getMonth()+1, d.getDate()].join('-');

            }

        </script>

    </head>

    <body>

        <div id="example">

        </div>

        <script type="text/jsx">

            var MyForm = React.createClass({

                    //初始设置值

                    getInitialState:function(){

                        return {helloTo:"hello world!"};

                    },

                    //onchange事件

                    handleChange:function(event){

                        this.setState({

                            helloTo:event.target.value.toUpperCase()

                        });

                    },

                    //提交事件

                    submitHandler:function(event){

                        event.preventDefault();    //阻止默认的事件

                        alert(this.state.helloTo);

                    },

                    render:function(){

                        return (

                            <form onSubmit={this.submitHandler} >

                                <input ref="helloTo" type="text" value={this.state.helloTo}

                                    onChange={this.handleChange} />

                                <br/>

                                <button type="submit">speak</button>

                            </form>

                        );

                    }

            });

            //将组件加到对应的元素上

            React.render( <MyForm />, document.getElementById('example') );

        </script>

    </body>

</html>

注意：

　　1.组件名称：第一个字母要大写，并使用驼峰法命名

　　2.onchange、onsubmit事件在Render里面要使用驼峰法的命名， onChange={this.handleChange} 切忌不能写成这样 onChange="{this.handleChange}"

　　3.通过event.target来访问触发实际的DOM节点,这是访问约束组件的最简单最直接的方式之一

　　　　handleEvent:function(event){

　　　　　　var DOMNode = event.target;

　　　　　　var newValue = DOMNode.value;

　　　　}

React(0.13) 定义一个input组件，使其输入的值转为大写的更多相关文章

  1. React(0.13) 定义一个checked组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  2. React(0.13) 定义一个多选的组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  3. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  4. React(0.13) 定义一个动态的组件(注释，样式)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  5. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. React(0.13) 定义一个动态的组件

    1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...

  7. React(0.13) 定义一个使用动画

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  8. React(0.13) 组件的组合使用

    <html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...

  9. Android开发 ---基本UI组件6 ：只定义一个listView组件，然后通过BaseAdapter适配器根据数据的多少自行添加多个ListView显示数据

    效果图: 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> ...

随机推荐

  1. 基于浏览器的开源“管理+开发”工具，Pivotal MySQL*Web正式上线！

    基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线! https://www.sohu.com/a/168292858_747818 https://github.com/ ...

  2. GLFW_KEY_KP_ADD和GLFW_KEY_KP_SUBTRACT

      这两个键的代码分别为: GLFW_KEY_KP_ADD(334) GLFW_KEY_KP_SUBTRACT(333)   对应的是键盘右侧数字面板上的+ -键.

  3. 【Python】使用内置base64模块进行编解码

    代码: import hashlib import base64 hash = hashlib.md5() hash.update('逆火Tu22m'.encode('utf-8')) print(h ...

  4. wdcp升级php5.3无法安装PDO_MySQL的解决

    重新下载php5.3的升级脚本 wget http://down.wdlinux.cn/in/php_up53.sh 不忙运行,先修改php_up53.sh,查找./configure字段,在这行的末 ...

  5. C#.NET常见问题(FAQ)-如何让文本框textbox内容靠右显示

    对于TextBox,我可以设置Text-Align属性为right,就可以让文字靠右了   对于Label而言,需要修改AutoSize为False,并修改TextAlign为MiddleRight, ...

  6. javascript数组操作大全-原创

    //1.join() 方法用于把数组中的所有元素放入一个字符串,并通过指定的分隔符进行分隔. //语法:stringObject.join(a)这是它的语法 //a指定分隔符的任意字符串 //返回值: ...

  7. uni - 使用npm

    一.使用 1. 在当前根目录初始化package.json npm init -y 2. 安装(自动生成node_modules文件夹) npm i packageName yarn add pack ...

  8. Session Alerts

    To create alerts for specific sessions, add rules using FiddlerScript. For example: Play a sound whe ...

  9. WINDOWS7 下 xclient 802.1x 客户端 停止运行的解决办法

    昨天下午,由于FOXMAIL 出现问题,修改了一个地方,导致xclient 停止运行.具体解决办法如下:右击“计算机”-进入“系统属性”-->“高级”-->"设置"-- ...

  10. 如何去掉browserLinkSignalR

    在使用vs开发时查看源代码可以发现最下面有以下代码,此段代码会一直请求网络,感觉不爽的可以这样去掉: <!-- Visual Studio Browser Link --> <scr ...