初学ReactJS，写了一个RadioButtonList组件

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 >