React(0.13) 定义一个多选的组件
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
</head>
<body>
<div id="example"> </div> <script type="text/jsx">
var MySelect = React.createClass({
//初始化组件的值
getInitialState:function(){
return {options:['B']};
},
handleChange:function(event){
var checked = [];
var sel = event.target; //获取当前的DOM对象
for(var i=0; i<sel.length; i++){
var option = sel.options[i];
if(option.selected){
checked.push(option.value);
}
}
//设置options的值
this.setState({
options:checked
});
},
submitHandler:function(event){
event.preventDefault(); //阻止事件发生
alert(this.state.options);
},
render:function(){
return (
<form onSubmit={this.submitHandler}>
<select multiple="true" value={this.state.options} onChange={this.handleChange}>
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</select>
<br/>
<button type="submit">Speak</button>
</form>
);
} }); //将组件加到对应的元素上
React.render( <MySelect />, document.getElementById('example') );
</script>
</body>
</html>
注意:
1.使用React里面的值作为html动态的值的时候不要给值添加引号如: value="{this.state.options}" 或者onChange="{this.handleChange}",这两种写法都是错的。
React(0.13) 定义一个多选的组件的更多相关文章
- 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) 定义一个input组件,使其输入的值转为大写
<!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) 组件的组合使用
<html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...
- 怎么定义一个自己的vue组件
1.在src文件夹中创建一个hello文件夹,然后创建hello.js和hello.vue 2.hello.vue代码如下 <template> <button>这是hello ...
随机推荐
- linux里tmpfs文件系统
linux里tmpfs文件系统 是一个虚拟内存文件系统,它不同于传统的用块设备形式来实现的Ramdisk,也不同于针对物理内存的Ramfs.Tmpfs可以使用物理内存,也可以使用交换分区. umoun ...
- oauth2-server-php-docs 食谱
一步一步的演练 以下说明提供详细的演练,以帮助您启动并运行OAuth2服务器.要查看实现此库的现有OAuth2服务器的代码库,请查看OAuth2 Demo. 初始化您的项目 为您的项目创建一个目录,并 ...
- Android 开源项目 eoe 社区 Android 客户端
本文内容 环境 开源项目 eoe 社区 Android 客户端 本文介绍 eoe 社区 Android 客户端.它是一个开源项目,功能相对简单,采用侧边菜单栏.可以学习一下.点击此处查看 GitHub ...
- 加快Android Studio的编译速度
从Eclipse切换到Android Studio后,感觉Android Studio的build速度比Eclipse慢很多,以下几个方法可以提高Android Studio的编译速度 使用Gradl ...
- IIS 之 IIS 7及以上多域名或端口绑定同一物理目录并设置不同默认文档
今天在 IIS 7 多端口或域名绑定同一物理目录,设置不同的默认文档遇到问题:同一物理目录的多个站点修改任意一个站点默认文档都会一起更改. 原因:在同一个物理目录下只有一个 web.config,并且 ...
- Servlet简介与生命周期
一:Servlet是什么 Servlet是运行在Web服务器上的Java程序,作为处理来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层.JSP在w ...
- JDK提供的四种线程池
一.线程池什么时候用,有什么好处? “线程池”顾名思义,就是存放线程的池子,这个池子可以存放多少线程取决于采用哪种线程池,取决于有多少并发线程,有多少计算机的硬件资源.使用线程池最直接的好处就是:线程 ...
- JUC-Condition和Lock实践-线程按序交替执行
编写一个程序,开启 3 个线程,这三个线程的 ID 分别为 A.B.C,每个线程将自己的 ID 在屏幕上打印 10 遍,要求输出的结果必须按顺序显示.如:ABCABCABC…… 依次递归 这里只使用c ...
- Leveldb 使用说明文档
Leveldb 使用说明文档 原作者:Jeff Dean, Sanjay Ghemawat 翻译:乌合之众solym@sohu.com 英文原文地址https://rawgit.com/google/ ...
- C#程序实现窗体的最大化/最小化
C#程序实现窗体的最大化/最小化 http://blog.csdn.net/jiangqin115/article/details/41251215 private void button1_Clic ...