一、bind复用
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 handleChange: function (name, event) { 20 var newState = {}; 21 newState[name] = name == "checked" ? event.target.checked : event.target.value; 22 this.setState(newState); 23 }, 24 submitHandler: function (event) { 25 event.preventDefault(); 26 console.log(this.state); 27 }, 28 render: function () { 29 return <form onSubmit={this.submitHandler}> 30 <label htmlFor="username">请输入用户名:</label> 31 <input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this, "username")} /> 32 <br /> 33 <select value={this.state.gender} onChange={this.handleChange.bind(this, "gender")}> 34 <option value="man">男</option> 35 <option value="woman">女</option> 36 </select> 37 <br /> 38 <label htmlFor="checkbox">同意用户协议</label> 39 <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this, "checked")} /> 40 <button type="submit">注册</button> 41 </form>; 42 } 43 }); 44 React.render(<MyForm></MyForm>, document.body); 45 </script> 46 </body> 47 </html>
二、name复用
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 handleChange: function (event) { 20 var newState = {}; 21 newState[event.target.name] = event.target.name == "checked" ? event.target.checked : event.target.value; 22 this.setState(newState); 23 }, 24 submitHandler: function (event) { 25 event.preventDefault(); 26 console.log(this.state); 27 }, 28 render: function () { 29 return <form onSubmit={this.submitHandler}> 30 <label htmlFor="username">请输入用户名:</label> 31 <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange} /> 32 <br /> 33 <select name="gender" value={this.state.gender} onChange={this.handleChange}> 34 <option value="man">男</option> 35 <option value="woman">女</option> 36 </select> 37 <br /> 38 <label htmlFor="checkbox">同意用户协议</label> 39 <input id="checkbox" name="checked" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange} /> 40 <button type="submit">注册</button> 41 </form>; 42 } 43 }); 44 React.render(<MyForm></MyForm>, document.body); 45 </script> 46 </body> 47 </html>