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>