React事件处理函数的bind复用和name复用
一、bind复用
1 <!DOCTYPE html>
2 <html >
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 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 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 >
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" 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 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>