React笔记（事件绑定）

注意大小写、注意大小写、注意大小写

类组件的事件绑定

<button onClick = {() => this.addN()}>点我 n + 1</button>

上面代码为最安全的写法，传一个函数给 onClick 即可，注意 C 大写

<button onClick = { this.addN }>点我 n + 1</button>

上面代码会有问题，这样会使得 this.addN 里的 this 变成 window ，因为 React 在调用这个函数的时候，不是用右边部分 this.addN() 调用的，而是用 onClick 调用的，当用户点击这个 button 的时候，React 会执行：button.onClick.call(null, event) ，onClick 的 this 为 null ,this 如果为空会自动用window 补位。
推荐看一下this教程

<button onClick = { this.addN.bind(this) }>点我 n + 1</button>

上面代码是可以的，因为它返回一个绑定了当前 this 的新函数

constructor(){
  super()
  this._addN = () => this.addN()
}
<button onClick = { this._addN }>点我 n + 1</button>

上面的代码是第一种方法的进化版，给箭头函数取个名字，但是呢这样写又要多想一个名字，不优雅，所以有了下面的写法：

constructor(){
  super()
  this.addN = () => this.setState({ n: this.state.n + 1})
}
<button onClick = { this.addN }>点我 n + 1</button>

上面的代码这样写不如直接声明 addN 的结构清晰，就有了下面的写法：

constructor(){
  super()
}
addN = () => this.setState({ n: this.state.n + 1})
<button onClick = { this.addN() }>点我 n + 1</button>