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>
10 <div id="container1"></div>
11 <div id="container2"></div>
12 <script type="text/jsx">
13 var RadioButton = React.createClass({
14 render: function(){
15 return (
16 <label htmlFor={this.props.id}>
17 <input type="radio"
18 id={this.props.id}
19 name={this.props.name}
20 value={this.props.value}
21 checked={this.props.checked}
22 onChange = {this.handleChange}/>
23 {this.props.text}
24 </label>
25 );
26 },
27 handleChange: function(event){
28 this.setState({selectedValue: event.target.value});
29 if(this.props.onSelectedValueChanged){
30 this.props.onSelectedValueChanged(event);
31 }
32 }
33 });
34
35 var RadioButtonList = React.createClass({
36 render: function(){
37 return (
38 <span className="radioButtonList">{this.renderRadionButtons()}</span>
39 );
40 },
41 renderRadionButtons: function(){
42 return this.props.listItems.map(function(item, index){
43 return (<RadioButton id={this.props.name + "_" + index}
44 name={this.props.name}
45 value={item.value||item}
46 text = {item.text||item}
47 checked={this.state.selectedValue == (item.value||item)}
48 onSelectedValueChanged = {this.onSelectedValueChanged}/>);
49 }.bind(this));
50 },
51 getInitialState: function(){
52 return {selectedValue: this.props.selectedValue};
53 },
54 onSelectedValueChanged: function(event){
55 this.setState({selectedValue: event.target.value});
56 }
57 });
58 React.render(<label for="province">Province:<RadioButtonList name="province" listItems={["Jiangsu","Zhejiang","Shanghai"]} selectedValue="Shanghai" /></label>, document.getElementById("container1")) ;
59 React.render(<label for="gender">Gender:<RadioButtonList name="gender" listItems={[{value:"M", text:"Male"}, {value:"F", text:"Female"}]} selectedValue="F" /></label>, document.getElementById("container2"))
60 </script>
61 </body>
62 </html>
作者：蒋金楠
微信公众账号：大内老A
微博：www.weibo.com/artech
如果你想及时得到个人撰写文章以及著作的消息推送，或者想看看个人推荐的技术资料，可以扫描左边二维码（或者长按识别二维码）关注个人公众号（原来公众帐号蒋金楠的自媒体将会停用）。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。