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. C语言中函数声明实现的位置

    在学习C语言的时候我遇到了这么个事情,因为之前先学习的C#,在C#编译器中,函数的声明位置不会影响编译的结果,但是在C语言中却发生了错误 先看一段代码: #include <stdio.h> ...

  2. 【转】Microsoft .NET Framework 3.5 sp1 安装速度慢，快速离线安装的方法

    1.到官网上下载3.5SP1的完整安装包.2.下载完成后,命令行下运行dotnetfx35.exe/x,解压到一个目录(如D:"),此时会生成一个D:"wcu目录3.进入解压目录下 ...

  3. 如何去掉dede列表推荐时标题被加粗

    dede在列表推荐文章默认为加粗不清楚的可以看图: 那个加黑的是默认的.如果你不想要被加黑,可以做如下改动.在include里找到文件:arc.listview.class.php查找并删除(注释掉也 ...

  4. 在RNN中使用Dropout

    dropout在前向神经网络中效果很好,但是不能直接用于RNN,因为RNN中的循环会放大噪声,扰乱它自己的学习.那么如何让它适用于RNN,就是只将它应用于一些特定的RNN连接上.   LSTM的长期记 ...

  5. tomcat context配置

    <Context path="/ext" docBase="/eqp/export" />                访问目录         ...

  6. 理解MVC，MVP和MVVM设计模式

    有3个非常受欢迎的MV-*系列设计模式:MVC,MVP,MVVM.他们被广泛应用于不多种结束.这篇文章我回阐述我自己对这3个设计模式的看法. MVC模式: MVC即Model-VIew-Control ...

  7. 配置iis时，浏览项目提示 无法识别的属性“targetFramework”。请注意属性名称区分大小写。

    无法识别的属性“targetFramework”.请注意属性名称区分大小写. 行 12:     </appSettings>行 13:   <system.web>行 14: ...

  8. sql字符串分组

    create function f_myWord(@s varchar(50)) returns varchar(50) as begin declare @i int set @i=1 while ...

  9. 线上应用bug跟踪查找-友盟统计

    线上的应用只要用心点点都能发现些bug,连微信,QQ也不列外.但是bug中最严重的算是闪退了,这导致了用户直接不能使用我们的app. 我们公司是特别注重用户反馈和体验的,我们会定期打电话咨询用户的使用 ...

  10. 实验环境里新创建成功的web application却在浏览器中返回404错误

    刚刚翻笔记翻到一些刚学SharePoint时候解决的一些很2的初级问题,本来是有些挣扎该不该把它们记录到这个blog里的?因为担心这些很初级的文章会拉低这个blog的逼格,但是我的哥们善意的提醒了我一 ...