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>
<div id="container1"></div>
<div id="container2"></div>
<script type="text/jsx">
var RadioButton = React.createClass({
render: function(){
return (
<label htmlFor={this.props.id}>
<input type="radio"
id={this.props.id}
name={this.props.name}
value={this.props.value}
checked={this.props.checked}
onChange = {this.handleChange}/>
{this.props.text}
</label>
);
},
handleChange: function(event){
this.setState({selectedValue: event.target.value});
if(this.props.onSelectedValueChanged){
this.props.onSelectedValueChanged(event);
}
}
});
var RadioButtonList = React.createClass({
render: function(){
return (
<span className="radioButtonList">{this.renderRadionButtons()}</span>
);
},
renderRadionButtons: function(){
return this.props.listItems.map(function(item, index){
return (<RadioButton id={this.props.name + "_" + index}
name={this.props.name}
value={item.value||item}
text = {item.text||item}
checked={this.state.selectedValue == (item.value||item)}
onSelectedValueChanged = {this.onSelectedValueChanged}/>);
}.bind(this));
},
getInitialState: function(){
return {selectedValue: this.props.selectedValue};
},
onSelectedValueChanged: function(event){
this.setState({selectedValue: event.target.value});
}
});
React.render(<label for="province">Province:<RadioButtonList name="province" listItems={["Jiangsu","Zhejiang","Shanghai"]} selectedValue="Shanghai" /></label>, document.getElementById("container1")) ;
React.render(<label for="gender">Gender:<RadioButtonList name="gender" listItems={[{value:"M", text:"Male"}, {value:"F", text:"Female"}]} selectedValue="F" /></label>, document.getElementById("container2"))
</script>
</body>
</html>
