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 ...
随机推荐
- 利用shell脚本批量提交网站404死链给百度
网站运营人员对于死链这个概念一定不陌生,网站的一些数据删除或页面改版等都容易制造死链,影响用户体验不说,过多的死链还会影响到网站的整体权重或排名. 百度站长平台提供的死链提交工具,可将网站存在的死链( ...
- Eclipse 2017最佳20个插件
https://www.infoworld.com/article/2606814/development-tools/development-tools-12-eclipse-plug-ins-ev ...
- 转： git使用时让http记住帐号密码
见 http://git.mydoc.io/?t=154710 https 方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受 https 带来的极速 按照以下设置记住密 ...
- C++之new、delete 与malloc、free的异同
在C/C++编程中常常会申请内存.而对内存的申请释放操作有两套方法: new.delete 与malloc.free.他们的使用最好是成对使用,不要去混搭---这可不是时尚界哦. 例如以下是这两组方法 ...
- 理解JavaScript函数参数
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数. arguments javascri ...
- Android Volley 库的使用
本文内容 什么是 Volley 库 Volley 能做什么 Volley 架构 环境 演示 Volley 库的使用 参考资料 Android 关于网络操作一般都会介绍 HttpClient 以及 Ht ...
- java class 文件
class 文件是什么 1).是对一个java类或一个java接口的全面描述:2).是对java程序二进制文件格式的精确定义:3).一个class文件中只能包含一个类或接口:4).作为程序传给jvm的 ...
- 保存登录plsql developer 的用户名和密码
1 保存用户名 tools -> Preferences -> User Interface - Options 勾选 Autosave username . 保存 2 保存密码 tool ...
- C#中RSA加密解密和签名与验证的实现
RSA加密算法是一种非对称加密算法.在公钥加密标准和电子商业中RSA被广泛使用.RSA是1977年由罗纳德•李维斯特(Ron Rivest).阿迪•萨莫尔(Adi Shamir)和伦纳德•阿德曼(Le ...
- ReactJS.NET 之 Demo 初探
ReactJS.NET 是专对 .NET 平台开发者设计,让我们不只可以在前端去Render出页面,也可以在Server端去Render页面.开发 ReactJS 可以用一般JS 库,也可以通过类似X ...