React事件处理函数的bind复用和name复用

一、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>

 

posted @ 2015-12-19 21:03  shamgod  阅读(1313)  评论(1)  编辑  收藏  举报
haha