React(0.13) 定义一个input组件，使其输入的值转为大写
<!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组件，使其输入的值转为大写的更多相关文章
- React(0.13) 定义一个checked组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个多选的组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(注释，样式)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(函数作为动态的值)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件
1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...
- React(0.13) 定义一个使用动画
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 组件的组合使用
<html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...
- Android开发 ---基本UI组件6 ：只定义一个listView组件，然后通过BaseAdapter适配器根据数据的多少自行添加多个ListView显示数据
效果图: 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> ...
随机推荐
- Express application generator的使用
首先拷贝express官网的一篇文章: (http://expressjs.com/en/starter/generator.html ) Express application generator ...
- 放入MP3的文件夹显示一些没用的标题，艺术家，唱片集怎么办？
原来的文件大小,类型,修改日期,创建日线都没了,怎么办? 右键点击名称,标题,艺术家那一行,在右键菜单中,去掉没用的,勾选有用的,如下图:
- 初始化android studio的方法
有可能是在一次android studio被我强制关闭以后,我的android studio就出现了各种诡异的问题,项目无法运行,新建的项目报错,等等.抓狂~~ 于是想到把android studio ...
- MDX Step by Step 读书笔记(八) - Navigating Hierarchies 层次结构导航
开篇介绍 本章主要内容包括: 解释各种不同的 MDX 导航函数的使用: Parent, Children, FirstChild, LastChild, Siblings, FirstSibling, ...
- vsphere中虚机的cpu热插拔和内存热添加
Guest OS对此支持如下: Windows 2008 64-bit Datacenter Edition,它是可以兼容vSphere的hot-add或hot-plug功能的.增加RAM和增加CPU ...
- 用Eclipse进行远程Debug代码 (转)
来自:http://blog.csdn.net/fyq891014/article/details/7534711 首先你本地Eclipse上要有和部署在远程服务器一至的项目,否则debug的时候会出 ...
- Live555实战之交叉编译live555共享库
作者:咕唧咕唧liukun321 来自:http://blog.csdn.net/liukun321 能够通过这个链接获得最新的live555源代码:Live555源代码下载 Live555 是一个为 ...
- Bootstrap定制开发
Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...
- Jsp重定向（response.sendRedirect()）和转发(request.getRequestDispatcher().forward(request,r)的差别
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- Linux上实现Windows的SQLPlus保存SQL历史记录功能
在Windows操作系统上,当在DOS命令窗口中运行SQL*Plus的时候,可以使用向上,向下键来跳回之前已经执行过的SQL语句.你可以根据需要修改他们,然后按Enter键重新提交执行. 然而,当在L ...