标签：
一、可控组件
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>
标签：
原文地址：http://www.cnblogs.com/shamgod/p/5059866.html
