<!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. 自己理解BFC 和 stack context , stack order

    1. stack order 发生在BFC计算好了之后. 2.一个一个的BFC里面,不同的block 里面的stack context 会根据 stack order的顺序,进行堆叠.呈现互相遮盖的效 ...

  2. 如何用Docker建立一个Node.js的开发环境

      建立一个文件夹 用管理员身份打开powershell. 在文件夹下面运行npm init, 根据提示填入信息,以便产生一个package.json文件. 在文件中加入需要的dependencies ...

  3. OpenGL ES3.0

    到今天,喜欢上了非常酷的图片处理和游戏,经了解,大部分都要使用opengl es,所以准备开始学习,然后深入学习cocos2d,GPUImage.平台为IOS OpenGL ES OpenGL ES ...

  4. Docker Inspect

    1.Inspect结果详细信息 docker inspect 7988f914a122 其中7988f914a122是某一容器进程的id { "Id": "7988f91 ...

  5. Office办公 SVG的图片文件如何保存为PNG

    用浏览器打开,然后右击图片另存为PNG   再用PS打开可以看到就是没有背景的PNG图片了        

  6. C#正则表达式 - 精通版

    1.正则所需要的命名空间是 using System.Text.RegularExpressions 2.创建Regex对象 new Regex(string pattern,RegexOptions ...

  7. ASP.NET绑定学习

    1.直接绑定到页面成员<asp:Repeater ... DataSource='<%#页面方法或属性%>'></asp:Repeater> 2.绑定到数组< ...

  8. WEB打印控件Lodop使用体会

                    控件的使用方法,作者都已经有详细的使用说明供使用者参考. 但是对于打印表格,确实出现一点小问题,如果表格是自然高度,也就是只设置了table的高度,此时是可以正常显示的 ...

  9. C#中e.Cancel，e.Handled的区别与应用

    首先并不是每个事件的e参数都有上述两个属性. e.Cancel:获取或设置指示是否应取消事件的值:e.Handled:获取或设置一个值,该值指示是否处理过此事件. 下面说说比较常见的场景: 1)e.c ...

  10. 高仿美团主界面&lt;一&gt;

    声明:本demo还未完好,正在持续更新中... 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,如今仅仅是完毕了 一部分. 会持续更行中. . .有兴趣的朋友能够关注我,我们一起coding, ...