一、
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 MyForm = React.createClass({ 12 getInitialState: function () { 13 return { 14 username: "", 15 gender: "man", 16 checked: true 17 }; 18 }, 19 handleUsernameChange: function (event) { 20 this.setState({ 21 username: event.target.value 22 }); 23 }, 24 handleGenderChange: function (event) { 25 this.setState({ 26 gender: event.target.value 27 }); 28 }, 29 handleCheckboxChange: function (event) { 30 this.setState({ 31 checked: event.target.checked 32 }); 33 }, 34 submitHandler: function (event) { 35 event.preventDefault(); 36 console.log(this.state); 37 }, 38 render: function () { 39 return <form onSubmit={this.submitHandler}> 40 <label htmlFor="username">请输入用户名:</label> 41 <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} /> 42 <br /> 43 <select value={this.state.gender} onChange={this.handleGenderChange}> 44 <option value="man">男</option> 45 <option value="woman">女</option> 46 </select> 47 <br /> 48 <label htmlFor="checkbox">同意用户协议</label> 49 <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} /> 50 <button type="submit">注册</button> 51 </form>; 52 } 53 }); 54 React.render(<MyForm></MyForm>, document.body); 55 </script> 56 </body> 57 </html>