<!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. Mahout源码目录说明

    http://www.cnblogs.com/dlts26/archive/2011/08/23/2150230.html mahout项目是由多个子项目组成的,各子项目分别位于源码的不同目录下,下面 ...

  2. Kafka：ZK+Kafka+Spark Streaming集群环境搭建（十八）ES6.2.2 增删改查基本操作

    #文档元数据 一个文档不仅仅包含它的数据 ,也包含 元数据 —— 有关 文档的信息. 三个必须的元数据元素如下:## _index    文档在哪存放 ## _type    文档表示的对象类别 ## ...

  3. RAMPS1.4 3d打印控制板接线与测试3

    RAMPS1.4作为mega2560的拓展板插在mega板子上面.从而让mega板子可以控制3d打印机的工作.ramps上的接线至关重要,接错不仅不能打印,甚至还会烧坏器件和板子.请一定注意. 我的淘 ...

  4. redis信息相关集群

    转: http://www.runoob.com/redis/redis-install.html //redis的安装与运维相关 http://zhou123.blog.51cto.com/4355 ...

  5. 让你的Python代码更加pythonic

    http://wuzhiwei.net/be_pythonic/ 何为pythonic? pythonic如果翻译成中文的话就是很python.很+名词结构的用法在中国不少,比如:很娘,很国足,很CC ...

  6. gson ajax 数字精度丢失

    ajax传输的json,gson会发生丢失,long > 15的时候会丢失0 解决方案:直接把属性为long的属性自动加上双引号成为js的字符串,这样就不会发生丢失了,ajax自动识别为字符串. ...

  7. js递归遍历key

    需求:根据Json对象,查找到某key所有值 var obj = { first: "1", second: { name: "abc", mykey: &qu ...

  8. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  9. 牛客网-《剑指offer》-替换空格

    题目:http://www.nowcoder.com/practice/4060ac7e3e404ad1a894ef3e17650423 C++ class Solution { public: vo ...

  10. Android studio 导入 github 工程

    最近从 github 下载两个开源项目,导入 Android Studio 都以 Studio 卡死结束.第一次以为是项目问题,第二次查询资料发现导入方式不正确,在此整理. 原目录结构如下: Andr ...