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. Thisgood

    this is good test print 'haha'

  2. CentOS搭建SVN记录

    1.安装subversion(client and server) $ yum install subversion $ yum install mod_dav_svn 安装成功之后使用 svnser ...

  3. Notepad++ 默认快捷键

    Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数):     1 ...

  4. Spring mvc Security安全配置

    Spring Security笔记:自定义Login/Logout Filter.AuthenticationProvider.AuthenticationToken SPRING SECURITY ...

  5. Convert PLY to VTK Using PCL 1.6.0 使用PCL库将PLY格式转为VTK格式

    PLY格式是比较流行的保存点云Point Cloud的格式,可以用MeshLab等软件打开,而VTK是医学图像处理中比较常用的格式,可以使用VTK库和ITK库进行更加复杂的运算处理.我们可以使用Par ...

  6. WPF整理-跨程序集访问资源

    “Sometimes binary resources are defined in one assembly (typically a class library), but areneeded i ...

  7. VIM配置

    Linux下的编辑器以vim和emacs为主流,一个编辑器之神,一个是神的编辑器. 本文以主要介绍如何在linux下以vim为基础搭建一个比较顺手的代码编辑器. 有两种比较流行的方式: 自动安装 手动 ...

  8. 浏览器中CSS的BUG

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...

  9. 详解Maple中的基础工具栏

    鉴于Maple 强大的符号计算功能,越来越多的人选择使用Maple 2015计算复杂的数学问题,初学者刚开始时需要对Maple有所熟悉才能很好地进行运用,下面就从基础开始,介绍Maple工作环境. M ...

  10. js表达式与语句的区别

    http://www.2ality.com/2012/09/expressions-vs-statements.html http://www.jb51.net/article/31298.htm 表 ...