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. hdu3068马拉车

    其实马拉车还真是最好理解的算法(感觉初中的时候好像讲过类似的,但是当时就没有认真听) 没想到一个简单的优化能变成O(n),感觉碉堡 不说了,马拉车裸题,我在写的时候只保留了id,没保留mx,希望能形成 ...

  2. Linux培训薪资过万是真事 星创客为嵌入式高端培训树标杆

    10月26日,是华清远见星创客嵌入式精英训练营首期班结业后的第15个工作日,虽然目前的学员就业成果已经超出了训练营老师们的预期,但就业工作仍然在继续进行着没有停止. 从训练营老师方面得出的统计数据,截 ...

  3. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  4. 【Silverlight】打开Silverlight程序报错，"未找到导入的项目......请确认<Import>声明中的路径正确，且磁盘上存在该文件"

    在打开Silverlight程序时,报错(如图所示),程序使用的是Visual Studio 2013和最新的Silverlight版本(Silverlight5). 然后我在网上找了下说:Silve ...

  5. HUD--递增数

    递增数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  6. 树莓派pppoe

    连接的网络是移动(铁通)的宽带,不同的宽带的dns需要修改. 1.首先安装pppoe包 apt-get install pppoe 2.然后,复制conf文件/etc/ppp/pppoe.conf: ...

  7. go中安装Beego不成功笔记

    在go.Git等等之类的相关软件安装好了之后,便可以安装Beego. 1.开始的时候是由于网络限制,不能访问Github,这个还好说找VPNFQ... 2.之后的问题,在git Bash中输入go g ...

  8. ThinkPHP5 与 ThinkPHP3.* 之间的使用差异

    因为研究TP5时间不是很长,暂时先列以下几处差异: 1.过去的单字母函数已完全被替换掉,如下: S=>cache,C=>config,M/D=>model,U=>url,I=& ...

  9. Awstats显示国家地区插件GeoIP安装

    Awstats默认安装之后是不具有识别访问者的国家和地区信息的,所以需要安装插件支持Awstats列出访问者的国家和地区,便于分析GeoIP免费的是国家/IP的数据表,GeoIPCityLite是地区 ...

  10. syntax error near unexpected token‘(

    用虚拟机的时候出现这样的: 上网查了资料之后,在括号"( " 前加上"$"字符就暂时不会提示出错了.