React笔记之事件绑定的写法

类组件的事件绑定

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

这种写法是正常的，传一个函数给onClick即可，注意大小写。

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

这种写法是错误的，这样会使得 this.addN 里的 this 变成 window ，

下面我们换几种正确的写法

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

这样写就可以了，这样就把this绑定为当前的this，而不会变成window了。

给箭头函数取一个名字，

this._addN = () => this.addN()

然后

<button onClick={this._addN}>n+1</button>

即可。

直接将 addN 改为箭头函数 constructor() { this.addN = () => this.setState({n: this.state.n + 1}) } render() { return <button onClick={this.addN}>n+1</button> }

最终写法

直接在类组件中写

addN = () => this.setState({n: this.state.n + 1})

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

写法之间的区别

写法一：

class Son extends React.Component { addN = () => this.setState({n: this.state.n + 1}) // 这种写法等价于下面的写法，这里少写了一个this constructor() { this.addN = () => this.setState({n: this.state.n + 1}) // 与上面的写法相等 } }

写法二：

class Son extends React.Component { //与下面的写法相同 addN() { this.setState({n: this.state.n + 1}) } //与上面的写法相同 addN: function() { this.setState({n: this.state.n + 1}) } }

写法一的区别和写法二的区别在于，一的方法是挂在对象上的，二的方法是挂在原型上的，下面我们来验证一下：

写法一直接把方法用箭头函数写时，new 一个对象出来时，方法是直接挂在对象上的，下图见证：

写法二直接把方法写在类里，new 一个对象出来时，方法是直接挂在原型链上的，下图见证：

写法一的this是不可变的，一直指向创建的对象，写法二的this由调用者决定，可能变成其他的对象，

因为函数箭头不接受this，也就是上面的说法，只属于创建它的对象。