初学ReactJS，写了一个RadioButtonList组件

1 DOCTYPE html>
2 <html>
3 <head>
4     <title>React Demotitle>
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                     this.props.id}>
17                          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
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                         {this.renderRadionButtons()}
39                     );
40                 },
41                 renderRadionButtons: function(){
42                     return this.props.listItems.map(function(item, index){
43                         return (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(for="province">Province:, document.getElementById("container1")) ;
59             React.render(for="gender">Gender:, document.getElementById("container2"))
60 script>
61 body>
62 html>

[02]编程技巧 reactjs

初学ReactJS，写了一个RadioButtonList组件

相关

reactjs中使用threejs从0到1

标签