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"?> ...
随机推荐
- Python标准库：内置函数type(object)
type(object) type(name, bases, dict) 本函数是返回对象的类型对象.仅仅有一个參数object时,直接返回对象的类型对象.假设仅仅是想推断一个对象是否属于某一个类的对 ...
- 【摘录】在Windows平台上使用Objective-C
虽然到目前为止最好的Objective-C 编码平台来自苹果公司,但它们绝不仅适用于苹果公司的平台.Objective-C 在Linux.BSD 甚至Windows 等其他平台都有相当久远的历史.根据 ...
- 造轮子 | 怎样设计一个面向协议的 iOS 网络请求库
近期开源了一个面向协议设计的网络请求库 MBNetwork,基于 Alamofire 和 ObjectMapper 实现,目的是简化业务层的网络请求操作. 须要干些啥 对于大部分 App 而言,业务层 ...
- ExtJs4.2中Tab选项卡的右击关闭其它和关闭当前功能不准确的解决方法
一.ExtJs4.2中Tab选项卡的右击关闭其它和关闭当前功能不准确的解决方法 二.找到ux目录下的TabCloseMenu.js文件,将内容替换成下面代码. 三.代码: /** * Plugin f ...
- AfterAddJS
protected override string AfterAddJS() { return CanDoo.FineUI.Utility.AfterSaveJS_ReloadData(EntityI ...
- Java WebSockets
https://github.com/TooTallNate/Java-WebSocket Java WebSockets This repository contains a barebones W ...
- 关于 qtchooser
关于这个工具,我有一万个 mmp 要讲.之前为了图省事,直接手动把 qmake 的链给改掉了,总觉得这样不大科学. 恩,系统既然提供了 qtchooser 那就用用吧.但是,尝试之后觉得做得跟屎一样. ...
- Webview跨域访问风险
漏洞原理:WebView对象的行为是通过WebSettings类进行设置的,如果配置不当,攻击者就可以利用该漏洞可以打破Android沙盒隔离机制,从而通过某个应用来攻击其它应用,盗取其它应用本地保存 ...
- 表访问方式---->通过ROWID访问表（table access by ROWID）
通过ROWID访问表(table access by ROWID) ROWID是一个伪列,即是一个非用户定义的列,而又实际存储于数据库之中.每一个表都有一个ROWID列,一个ROWID值 ...
- 【shell】创建长目录，目录存在则忽略，缺失则创建
有时候,我们需要创建一个空目录树,如果给定路径包含目录,那么还必须检查这些目录是否存在: mkdir –p /qinys/oliver/tmp/ 执行上述命令即可创建长目录,并且有则忽略,无则创建原则 ...