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"?> ...
随机推荐
- SciPy 安装不上？
参考:链接:https://www.zhihu.com/question/30188492/answer/150928275来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处 ...
- Java-JUC（五）：闭锁（CountDownLatch）
闭锁(CountDownLatch) jdk5.0在java.util.concurrent包中提供了CountDownLatch,它是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一 ...
- RAMPS1.4 3d打印控制板接线与测试2
http://learn.makerlab.me/guides/1/articles/2 mega 2560板子在3d打印机中相当于大脑,控制这所有的3d打印配件来完成复杂的打印工作,但mega256 ...
- oauth2-server-php-docs 存储 学说2
学说2 创建客户端和访问令牌存储 要把学说融入到你的项目中,首先要建立你的实体.我们先从客户端,用户和访问令牌模型开始: yaml YourNamespace\Entity\OAuthClient: ...
- php+C#.net混合开发
php+C#.net混合开发 上图一张,左右是php语言,右边是C#语言,解决方案中的php项目是红色的小标识
- ccc如何在一台windows主机上搭建mysql主从复制
参考:http://www.cnblogs.com/wzjbk/p/6266899.htmlc 进入mysql: 进入到mysql的bin目录下才可以输入 mysql -hlocalhost -uro ...
- 保存html代码
function svcode(F) { if (document.all) { var F = $id(F); var E = window.open("", "_bl ...
- Go语言中Path包用法
// path package main import ( "fmt" "os" "path" "path/filepath&qu ...
- python 大小端数据转换
"6fe28c0ab6f1b372c1a6a246ae63f74f931e8365e15a089c68d6190000000000".decode('hex')[::-1].enc ...
- C#的ThreadStart 和 Thread
多线程,new Thread(t1);和new Thread(new ThreadStart(t1));有什么区别 没有区别. 前者,是c#的语法.也就是说是编译器帮你改写为第二种形式. 因此你要搞清 ...