简介

最近，react的官方文档有了一次更新，文档描述的更加易懂，其中介绍了事件绑定的３种不同的写法，这里做一下总结．

  • ３中写法,如今第一种最常见，在constructor中进行绑定
  • 第二种是es2016特性–property initializer syntax
  • 第三种是arrow function in the callback

这篇文章介绍了更多的方法，可以参考

完整实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
//　第一种方法
class TodoApp1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      text: ''
    };
    // 这里绑定
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    // 还能简写
    // this.handleChange = ::this.handleChange;
    // this.handleSubmit = ::this.handleSubmit;
  }

  render() {
    return (
      <div>
        <h3> Todo </h3>
        <TodoList data={this.state.items} />
        <form onSubmit={this.handleSubmit} >
          <input onChange={this.handleChange} value={this.state.text} />
          <button>Add #{this.state.items.length+1}</button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    console.log('第一种方法----', this);
    this.setState( {text: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    const newItem = {
      text: this.state.text,
      id: Date.now(),
    };
    this.setState( (prevState) => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

// 第二种方法
class TodoApp2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      text: ''
    };
  }

  render() {
    return (
      <div>
        <h3> Todo </h3>
        <TodoList data={this.state.items} />
        <form onSubmit={this.handleSubmit} >
          {/* 注意这里不加括号 */}
          <input onChange={this.handleChange} value={this.state.text} />
          <button>Add #{this.state.items.length+1}</button>
        </form>
      </div>
    );
  }
// 属性初始化　
  handleChange = (e) => {
    console.log('第二种方法----', this);
    this.setState( {text: e.target.value});
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const newItem = {
      text: this.state.text,
      id: Date.now(),
    };
    this.setState( (prevState) => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

// 第三种方法
class TodoApp3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      text: ''
    };
  }

  render() {
    return (
      <div>
        <h3> Todo </h3>
        <TodoList data={this.state.items} />
        <form onSubmit={(e) => this.handleSubmit(e)} >
          {/* 这里必须有括号　　this.handleChange(e)  */}
          <input onChange={(e) => this.handleChange(e)} value={this.state.text} />
          <button>Add #{this.state.items.length+1}</button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    console.log('第三种方法----', this);
    this.setState( {text: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    const newItem = {
      text: this.state.text,
      id: Date.now(),
    };
    this.setState( (prevState) => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
      render() {
        return (
          <ul>
           {this.props.data.map((item,index) => (
             <li key={item.id}> {index+1}--->{item.text}</li>
           ))}
          </ul>
        );
      }
}

class Todo extends React.Component {
  render() {
    return (
      <div>
        <TodoApp1 />
        <TodoApp2 />
        <TodoApp3 />
      </div>
    );
  }
}
ReactDOM.render(<Todo />, document.querySelector('#root'));