<!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. Spring（八）：Spring配置Bean（一）BeanFactory&ApplicationContext概述、依赖注入的方式、注入属性值细节

    在Spring的IOC容器里配置Bean 配置Bean形式:基于xml文件方式.基于注解的方式 在xml文件中通过bean节点配置bean: <?xml version="1.0&qu ...

  2. Window配置Redis环境和简单使用

    一.关于Redis Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据 ...

  3. Overcoming the List View Threshold in SharePoint CAML queries

    From: https://www.codeproject.com/articles/1076854/overcoming-the-list-view-threshold-in-sharepoint- ...

  4. 如何用简单例子讲解 Q - learning 的具体过程？

    作者:牛阿链接:https://www.zhihu.com/question/26408259/answer/123230350来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. 高速基于echarts的大数据可视化

    [Author]: kwu 高速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具.高速开发的过程例如以下: 1.引入echarts的依赖js库 <script type= ...

  6. DFS csu1719 Boggle

    传送门:id=1719">点击打开链接 题意:真正的题意是,告诉你一些字符串.然后告诉你非常多个字符格子,问这些字符串是否能在字符格子中连起来,在格子中对角线也觉得是连在一起的.假设格 ...

  7. WampServer在win10系统下安装的坑

    WampServer之前一直是好好的,最近换了Win10的系统,安装的不太顺利. 1.问题一 出现的第一个问题,就是安装时会报错.怎么解决的,具体的我已经忘记了,好像是要下载vc运行时包. 2.问题二 ...

  8. 求两个有序数组的中位数或者第k小元素

    问题:两个已经排好序的数组,找出两个数组合并后的中位数(如果两个数组的元素数目是偶数,返回上中位数). 设两个数组分别是vec1和vec2,元素数目分别是n1.n2. 算法1:最简单的办法就是把两个数 ...

  9. 1067: 密室寻宝(find)

    #include <iostream> #include <iomanip> #include <cstdlib> #include <string> ...

  10. sqlalchemy 获取计数 count

    from sqlalchemy import func message_count = self.db.query(func.count(Message.uid)).filter(Message.ui ...