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 >