spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)

1. 自动绑定 (事件绑定)

绑定this: React为什么要这么做?

• 是js中this绑定方式决定的，和react工作方式无关。
• 函数处理, 是作为回调传递的，这样就会丢失了上下文, 所以this为 undefined
• this不是默认指向在全局的吗? 在严格模式下Strict mode, 就是个undefined, 不严格模式为全局

// 三种方式 // 1. 构造器绑定 constructor (props) {super(props)this.handleClick3 = this.handleClick3.bind(this)}// 2. 箭头函数 <button onClick={() => this.handleClick2()}>// 3. bind方式 <button onClick={this.handleClick4.bind(this)}>

2. 为什么要绑定this?

LIN.JY666：[JS基础] 7 - this, call/apply/bind/箭头函数​zhuanlan.zhihu.com

• 如果是个函数调用，那么this指向函数内部，如果是非严格模式，那么this指向window
• 如果是个对象里的函数调用，那么this指向该对象
• this要等到执行的时候，才确定是什么。

为了绑定当前执行的环境, 当前执行的作用域

const object = {name: '123',fn: function () {// 隐式绑定console.log('this.name', this.name)} } const name = 'test'// 1. ? object.fn() // 返回'123' 对象里的函数调用, this指向该对象// 2. ? objFn = object.fn objFn() // 返回 test 函数调用，那么this指向函数内部，如果是非严格模式，那么this指向window// 3. 绑定, object.fn的this 使用object内部 objFnn = object.fn.bind(object) objFnn() // '123'

总结

以上是生活随笔为你收集整理的spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。