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>

相关阅读:
从标准输入读取一行字符串的方法
 输入文件包含若干行，不知何时结束时，如何读入数据
 centos7.5 + docker + mysql5.7 多实例安装
 copula函数及其Var计算的Python实现
 让网络机器人看起来像人类用户
 流畅的python读书笔记
 神经网络层数和神经元数目的一些建议
 SVM算法Python实现
 预测性维护｛维修｝又称：预知性、预见性维护｛维修｝）
WebDriver API 元素定位（Python）
原文地址：https://www.cnblogs.com/shamgod/p/5059779.html