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. js数组与对象性能比较

    js的数组可以看成特殊的对象,获取指定项的行为跟获取对象中指定key对应项的行为是一致的. 一般都是hash map实现的,因而复杂度是常数级的.

  2. IntelliJ IDEA - 热部署插件JRebel 安装使用教程

    IntelliJ IDEA - JRebel 安装使用教程 JRebel 能做什么? JRebel 是一款热部署插件.当你的 Java-web 项目在 tomcat 中 run/debug 的时候 , ...

  3. oracle连接问题【转载】

    SQL的四种连接-左外连接.右外连接.内连接.全连接   今天在看一个遗留系统的数据表的时候发现平时查找的视图是FULL OUT JOIN的,导致平时的数据记录要进行一些限制性处理,其实也可以设置视图 ...

  4. debian下Apache和tomcat整合（使用apt工具）

    最近部署web系统,需要使用tomcat处理和Apache整合使用,tomcat处理JSP,Apache处理静态资源.开始不知道怎么操作,在网上查阅资料走了很多弯路.完成时候,发现其实很简单,现将配置 ...

  5. java项目启动后,数据库字段生成 user_name带下划线这种形式的

    hibernate 5.0 版本以上去掉了 hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy  这个属性,如果非 ...

  6. Codeforces Round #361 (Div. 2) A

    A - Mike and Cellphone Description While swimming at the beach, Mike has accidentally dropped his ce ...

  7. Python之路第一课Day4--随堂笔记（迭代生成装饰器）

    上节回顾: 1.集合 a.关系测试 b.去重 2.文件操作及编码 3.函数 4.局部变量和全局变量 上节回顾 本节课内容: 1.迭代器生成器 2.装饰器 3.json pickle数据序列化 4.软件 ...

  8. *HDU 1398 母函数

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  9. 代码片段：处理HTTP请求的接口

    以下程序用来获取用户传递过来的信息. 1.头文件 /* * 这个是处理HTTP请求的接口头文件 */ #define KEY_VALUE_MAX 1024 /* 键值的最大长度 */ typedef ...

  10. ormlite的使用方法

    ormlite是什么? 简单来说,就是我们定义一个实体类,利用这个框架,它可以帮我们吧这个实体映射到我们的数据库中,在Android中是SQLite,数据中的字段就是我们定义实体的成员变量. 官网地址 ...