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"?> ...
随机推荐
- 【R】函数-其它实用函数
- "Ext 4.1 Grid 'el.dom' 为空或不是对象"问题的解决
我在使用Ext 4.1 做Grid,IE下冒出这么个错误,导致表格完全显示不出来,换另外一个IE浏览器,有没有问题,呵呵,百思不得其解啊... 后来得出答案,即在grid相关代码周围套上Ext.onR ...
- jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法
实例效果: 代码演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- PAT 1065 1066 1067 1068
pat 1065 A+B and C 主要是注意一下加法溢出的情况,不要试图使用double,因为它的精度是15~16 ...
- 树莓派通过GPIO控制步进电机
一.接线方式与GPIO调用方法: 电源接入+5v和GND In1-4分别接GPIO1-4 正转时,GPIO1-4分次传入:[1,0,0,0],[sleep],[0,1,0,0],[sleep],[0, ...
- sqlmap检测sql注入漏洞
sqlmap是一款非常强大的开源sql自动化注入工具,可以用来检测和利用sql注入漏洞.它由python语言开发而成,因此运行需要安装python环境. 官网:http://sqlmap.org/ 乌 ...
- llvm -O 经历过那些pass
https://stackoverflow.com/questions/15548023/clang-optimization-levels
- Microsoft Excel as a Source and Target as Oracle in ODI
创建测试表格和目标表 导出scott用户的emp表为EMP.xlsx作为测试的元数据,结果如下 打开EMP.xlsx 公式→定义名称 创建目标表(来自scott.sql) CREATE TABLE E ...
- oracle中解决角色PLUSTRACE不存在
在sqlplus中用autotrace查看执计划时出现如下错误提示: SYS@CDB$ROOT> conn scott/tiger@pdborcl Connected.会话已更改. SCOTT@ ...
- Oracle SQLPLUS提示符设置
Oracle SQLPLUS提示符设置 把Oracle sqlplus提示符修改为如下,可以提醒你所在的用户模式,减少误操作. set sqlprompt _user'@'_connect_ident ...