<!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. Total Commander如何设置自定义快捷键在当前目录打开ConEmu

    Total Commander,简称TC,原名Windows Commander,是Windows平台下功能最强大的全能文件管理器. 自从使用了TC基本上就很少再打开Window的文件夹了,因为TC不 ...

  2. Docker-machine创建虚机时停在虚机启动的提示上，并且创建的虚机显示Ip Not found

    Docker-machine创建虚机时停在虚机启动的提示上,并且创建的虚机用docker-machine ls 列出来的时候显示Ip Not found, 是什么原因那? [答案] 看这个帖子: ht ...

  3. jchat-windows-master 编译输出日志

    第一个项目成功生成的输出日志 >------ 已启动全部重新生成: 项目: QxOrm, 配置: Debug x64 ------ >Moc'ing IxModel.h... >Mo ...

  4. js获取当月最后一天

    构造函数 new Date(); new Date(value); new Date(dateString); new Date(year, month[, day[, hour[, minutes[ ...

  5. iOS的settings bundle中开关button(Toggle Switch)取不到值的问题

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在Xcode7.2中设置App的settings bundle ...

  6. Office 如何添加Adobe Acrobat虚拟PDF打印机

    在服务中找到Print Spooler服务,如果是停止的点击启动,如果已经启动点击重新启动   在打印机中添加本地打印机   使用现有端口,然后选择Adobe PDF选项,下一步,然后在厂商中选择Ad ...

  7. Windows 下 Git 安装与初始配置

    官方下载地址:https://git-scm.com/download/win,我下载的最新版是 Git-2.15.1.2-64-bit.exe . Windows 下安装步骤 1.相关信息,直接“ ...

  8. 【树莓派】服务配置相关2：基于RPi Desktop的服务配置

    该文接续之前写过的一篇:[树莓派]服务配置相关. 这是我个人用来进行树莓派盒子安装配置的脚本,对于外部其他博友,可以部分参考,但不需要逐个引用. 现在有一定更新,部分按如下脚本来操作: step1: ...

  9. ANT task之Junit、JunitReport

    一.ANT任务之Junit: 学习ANT其实主要是学习ANT的task,ANT众多task中有一个Testing Tasks,它下面有两个任务:Junit和JunitReport,主要用来进行单元测试 ...

  10. 002-Go通过ioutil 读写文件

    1.读取文件内容 package main import( "io/ioutil" "fmt" ) func main(){ b,err := ioutil.R ...