初学ReactJS，写了一个RadioButtonList组件

?1?<!DOCTYPE?html>
?2?<html?3?head?4?????title>React?Demo</?5?????meta?charset="utf-8"?/>
?6??7?body?8?????script?src="Scripts/react.js"></script?9?????="Scripts/JSXTransformer.js"10?????div?id="container1"div11?????="container2"12?????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:?37?????????????????????38?????????????????????????<span?className="radioButtonList">{this.renderRadionButtons()}</span>
39?????????????????????);
40?????????????????},1)">41?????????????????renderRadionButtons:?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?????????????????},1)">51?????????????????getInitialState:?52?????????????????????return?{selectedValue:?this.props.selectedValue};
53?????????????????},1)">54?????????????????onSelectedValueChanged:?55?????????????????????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?>?
61?62?>