初学ReactJS,写了一个RadioButtonList组件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>React Demo</title>
 5     <meta charset="utf-8" />
 6 </head>
 7 <body>
 8     <script src="Scripts/react.js"></script>
 9     <script src="Scripts/JSXTransformer.js"></script>
10     <div id="container1"></div>
11     <div id="container2"></div>
12     <script type="text/jsx">
13         var RadioButton = React.createClass({
14             render: function(){
15                 return (
16                     <label htmlFor={this.props.id}>
17                         <input type="radio"
18                                id={this.props.id}
19                                name={this.props.name}
20                                value={this.props.value}
21                                checked={this.props.checked}
22                                onChange = {this.handleChange}/>
23                         {this.props.text}
24                     </label>
25                 );
26             },
27             handleChange: function(event){
28                 this.setState({selectedValue: event.target.value});
29                 if(this.props.onSelectedValueChanged){
30                     this.props.onSelectedValueChanged(event);
31                 }
32             }
33         });
34 
35         var RadioButtonList = React.createClass({
36                 render: function(){
37                     return (
38                         <span className="radioButtonList">{this.renderRadionButtons()}</span>
39                     );
40                 },
41                 renderRadionButtons: function(){
42                     return this.props.listItems.map(function(item, index){                 
43                         return (<RadioButton id={this.props.name + "_" + index} 
44                                      name={this.props.name} 
45                                      value={item.value||item}
46                                      text = {item.text||item}
47                                      checked={this.state.selectedValue == (item.value||item)}
48                                      onSelectedValueChanged = {this.onSelectedValueChanged}/>);
49                     }.bind(this));
50                 },
51                 getInitialState: function(){
52                     return {selectedValue: this.props.selectedValue};
53                 },
54                 onSelectedValueChanged: function(event){
55                     this.setState({selectedValue: event.target.value});
56                 }
57             });
58             React.render(<label for="province">Province:<RadioButtonList name="province" listItems={["Jiangsu","Zhejiang","Shanghai"]} selectedValue="Shanghai" /></label>, document.getElementById("container1")) ;
59             React.render(<label for="gender">Gender:<RadioButtonList name="gender" listItems={[{value:"M", text:"Male"}, {value:"F", text:"Female"}]} selectedValue="F" /></label>, document.getElementById("container2"))
60 </script> 
61 </body>
62 </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

『Demo』你想开发的页面特效,这里都能找到~

来源 | 微信小程序联盟 作者 | 极乐蜀黍 这期极乐大叔将小程序内各种页面效果实现方法聚合了一下,以便大家能够迅速而方便的使用。 1 文字跑马灯效果: h...

2967
来自专栏Sorrower的专栏

界面无小事(五):自定义TextView

1083
来自专栏田超学前端

微信小程序开发:canvas 多行文字换行(二)

微信小程序开发中,canvas画出一篇文章,由于句子长短不一,画起来确实是费劲,查了不少资料,总结一下:

5267
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

1652
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

1172
来自专栏进击的君君的前端之路

关于浮动

2224
来自专栏Python疯子

Swift - Button,Label

1332
来自专栏7号代码

Android应用界面开发——布局

线性布局可以控制各组件横向排列(通过设置属性android:orientation属性控制),也可控制各组件纵向排列。

1852
来自专栏前端知识分享

第127天:移动端-获取触摸点的位置

$("#demoid").bind('touchstart',function(){ //代码处理});

2042
来自专栏九彩拼盘的叨叨叨

学习前端 第4周 第1天

783

扫码关注云+社区

领取腾讯云代金券