React表单组件自定义-可控及不可控组件

一、可控组件

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单详解</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
 9     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var Radio = React.createClass({ 
12             getInitialState: function () {
13                 return {
14                     value: this.props.defaultValue
15                 }; 
16             },
17             handleChange: function (event) { 
18                 if (this.props.onChange) {
19                     this.props.onChange(event); }
20                     this.setState({
21                     value: event.target.value
22                 }); 
23             },
24             render: function () {
25                 var children = {};
26                 var value = this.props.value || this.state.value;
27                 React.Children.forEach(this.props.children, function (child, i) {
28                     var label = <label> 
29                         <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
30                         {child.props.children}
31                         <br/>
32                     </label>;
33                     children['label' + i] = label; 
34                 }.bind(this));
35                 return <span>{children}</span>; 
36             }
37         });
38         var MyForm = React.createClass({
39             getInitialState: function () { 
40                 return {my_radio: "B"};
41             },
42             handleChange: function (event) {
43                 this.setState({
44                     my_radio: event.target.value
45                 }); 
46             },
47             submitHandler: function (event) { 
48                 event.preventDefault(); 
49                 alert(this.state.my_radio);
50             },
51             render: function () {
52                 return <form onSubmit={this.submitHandler}> 
53                     <Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
54                         <option value="A">First Option</option> 
55                         <option value="B">Second Option</option>
56                         <option value="C">Third Option</option>
57                     </Radio>
58                     <button type="submit">Speak</button>
59                 </form>;
60             } 
61         });
62         React.render(<MyForm></MyForm>, document.body);
63     </script>
64 </body>
65 </html>

 

二、不可控组件

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单详解</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
 9     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var Radio = React.createClass({ 
12             getInitialState: function () {
13                 return {
14                     value: this.props.defaultValue
15                 }; 
16             },
17             handleChange: function (event) { 
18                 if (this.props.onChange) {
19                     this.props.onChange(event); 
20                 }
21                 this.setState({
22                     value: event.target.value
23                 }); 
24             },
25             render: function () {
26                 var children = {};
27                 var value = this.props.value || this.state.value;
28                 React.Children.forEach(this.props.children, function (child, i) {
29                     var label = <label> 
30                         <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
31                         {child.props.children}
32                         <br/>
33                     </label>;
34                     children['label' + i] = label; 
35                 }.bind(this));
36                 return <span>{children}</span>; 
37             }
38         });
39         var MyForm = React.createClass({
40             submitHandler: function (event) { 
41                 event.preventDefault(); 
42                 alert(this.refs.radio.state.value);
43             },
44             render: function () {
45                 return <form onSubmit={this.submitHandler}>
46                 <Radio ref="radio" name="my_radio" defaultValue="B">
47                     <option value="A">First Option</option>
48                     <option value="B">Second Option</option>
49                     <option value="C">Third Option</option>
50                 </Radio>
51                 <button type="submit">Speak</button>
52                 </form>;
53             } 
54         });
55         React.render(<MyForm></MyForm>, document.body);
56     </script>
57 </body>
58 </html>

 

posted @ 2015-12-19 21:47  shamgod  阅读(843)  评论(0)  编辑  收藏  举报
haha