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>

     <div id="container1"></div>

     <div id="container2"></div>

     <script type="text/jsx">

         var RadioButton = React.createClass({

             render: function(){

                 return (

                     <label htmlFor={this.props.id}>

                         <input type="radio"

                                id={this.props.id}

                                name={this.props.name}

                                value={this.props.value}

                                checked={this.props.checked}

                                onChange = {this.handleChange}/>

                         {this.props.text}

                     </label>

                 );

             },

             handleChange: function(event){

                 this.setState({selectedValue: event.target.value});

                 if(this.props.onSelectedValueChanged){

                     this.props.onSelectedValueChanged(event);

                 }

             }

         });

 

         var RadioButtonList = React.createClass({

                 render: function(){

                     return (

                         <span className="radioButtonList">{this.renderRadionButtons()}</span>

                     );

                 },

                 renderRadionButtons: function(){

                     return this.props.listItems.map(function(item, index){                 

                         return (<RadioButton id={this.props.name + "_" + index} 

                                      name={this.props.name} 

                                      value={item.value||item}

                                      text = {item.text||item}

                                      checked={this.state.selectedValue == (item.value||item)}

                                      onSelectedValueChanged = {this.onSelectedValueChanged}/>);

                     }.bind(this));

                 },

                 getInitialState: function(){

                     return {selectedValue: this.props.selectedValue};

                 },

                 onSelectedValueChanged: function(event){

                     this.setState({selectedValue: event.target.value});

                 }

             });

             React.render(<label for="province">Province:<RadioButtonList name="province" listItems={["Jiangsu","Zhejiang","Shanghai"]} selectedValue="Shanghai" /></label>, document.getElementById("container1")) ;

             React.render(<label for="gender">Gender:<RadioButtonList name="gender" listItems={[{value:"M", text:"Male"}, {value:"F", text:"Female"}]} selectedValue="F" /></label>, document.getElementById("container2"))

 </script> 

 </body>

 </html>

初学ReactJS，写了一个RadioButtonList组件的更多相关文章

  1. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

  2. 如何写好一个 Spring 组件

    背景 Spring 框架提供了许多接口,可以使用这些接口来定制化 bean ,而非简单的 getter/setter 或者构造器注入.细翻 Spring Cloud Netflix.Spring Cl ...

  3. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  4. js单行写一个评级组件

    单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); -----------------------------------分隔符- ...

  5. vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  6. 用vue.js写的一个瀑布流的组件

    用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402

  7. 表单配置项写法，表单写成JSON数组套对象，一行是一个数组单位，一列是一个对象单位，然后再写一个公共组件读取这个配置，循环加载slot，外层载入slot的自定义部分，比如input select等，这种写法就是把组件嵌套改为配置方式

    表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...

  8. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  9. 把iview中的table组件写成了一个公用组件，在另一个组件里去引用它的时候rander函数里的this指向不正确

    在vue项目里使用iview制作后台管理系统时,由于有多个页面都需要用到table组件,所以就把table写到了一个公共组件里,在其他页面去引用它,但是这时会发现一个问题,就是render函数里的th ...

随机推荐

  1. windows下面安装Python和pip终极教程

    在大二的时候接触过一段时间的Python,最近又开始玩起了这门语言.总的来说,个 人很喜欢Python的语言风格,但是这门语言对于windows并不算很友好,因为如果是初学者在windows环境下安装 ...

  2. 转载：Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

    转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致…按下F12;还是熟悉的味道;  或者直接 Ctrl ...

  3. Oozie_初识

    Oozie 任务调度框架(基于工作流) oozie运行于hadoop集群,对hive,mr,flume,Soop,spark,shell等框架进行任务流调度 如: job1-->job2 &am ...

  4. java学习中的一些疑惑解答

    一.java中的枚举类型: 在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.例如星期一到星期日七个数据元素 ...

  5. 【安装mysql】windows安装压缩版mysql5.7.15

      160915.1459 综述 中午安装成功,但是启动失败,很可能是压缩包有问题(从别人拷的),解决了近一个小时,没搞定,于是换条方案,重新去官网下载压缩包,这次看准了windows架构,且64-b ...

  6. Hibernate一对多配置

    刚刚学习了Hibernate框架的基础知识,下面我来说说关于Hibernate一对多的配置 首先是大配置 连接数据库 用户名 和密码 能和小配置连接 部门小配置: 员工小配置: 部门实体类 员工实体类 ...

  7. 用 string 进行插入、替代、查找输出下标等操作

    string s; s = "; string::iterator it; it = s.begin();//让s指向第一个元素 cout << s; system(" ...

  8. 七种机器内部排序的原理与C语言实现，并计算它们的比较次数与移动次数。

    内部排序是指待排序列完全存放在内存中所进行的排序过程,适合不太大的元素序列. 排序是计算机程序设计中的一种重要操作,其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个相知有序的序列.排序分为 ...

  9. Edge.js：让.NET和Node.js代码比翼齐飞

    通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这 ...

  10. 每周一书-《鸟哥的Linux私房菜基础学习篇(第四版)》台湾原版，你想要吗？

     首先说明,本周活动有效时间为2016年10月19日到2016年10月31日.   目在介绍这本书之前,首先要感谢QQ号为:1084830483(路在远方),来自哈尔滨工程大学的同学赠送给玄魂工作室的 ...