初学ReactJS，写了一个RadioButtonList组件

蒋金楠

发布于 2018-01-15 16:54:17

8420

发布于 2018-01-15 16:54:17

 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>