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操作记录
1.写入中文出错,需要执行 reload(sys) sys.setdefaultencoding('utf8') 2.json.dump中文写入为\xxxx ensure_ascii=False
- Log4net的不能产生Log文件的问题
[问题] 用如下的步骤应用了Log4Net: 建立了一个公用的项目, 在里面引入了Log4net的Nuget package. 在公用的项目中建立了一个类,加上了Log4net的attribute. ...
- Windows系统内存分析工具的介绍
Windows系统内存分析工具的介绍(进程管理器,资源管理器,性能监视器, VMMap, RamMap,PoolMon) 微软官方提供多种工具来分析Windows 的内存使用情况,除了系统自带的任 ...
- java 上传图片压缩
public static void uploadFile(MultipartFile multfile, String filePath) throws Exception { File targe ...
- python之simplejson，Python版的简单、 快速、 可扩展 JSON 编码器/解码器
python之simplejson,Python版的简单. 快速. 可扩展 JSON 编码器/解码器 simplejson Python版的简单. 快速. 可扩展 JSON 编码器/解码器 编码基本的 ...
- Office WPS如何在页眉页脚添加一条横线
点击样式,页眉,修改 然后设置格式,可以添加一条或者两条横线,也可以设置不同的线型 最后效果如下图所示
- C/C++——程序的内存分配
C/C++程序内存分配 一.预备知识-程序的内存分配 一个由c/C++编译的程序占用的内存分为下面几个部分 1.栈区(stack):由编译器自己主动分配释放 ,存放函数的參数值,局部变量的值等.其操作 ...
- 使用Visual Studio Code调试React Native报错
报错信息: [Error] Error: Unknown error: not all success patterns were matched. It means that "react ...
- 使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar错误
今天创建了一个maven项目,想使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the ...
- java.io.ioexception failed to mkdirs jenkins xcode || jenkins 无法创建新文件
=========================================================== FATAL: Failed to mkdirs: /Users/chenqing ...