📅 2021-11-01发表🕰️ 2025-06-15更新📁 学习记录⌛ 6 分钟读完 (大约902个字)

一个简单的React事件绑定

需要事件绑定的原因

首先说明一下，React生成出来的事件，里面的this并不是指向自身的，这是Javascript语法的规定，是不可避免的。

比如<button onClick={this.plus}>plus</button>中，plus上的this其实是绑在了window上的，也就是事件响应时的上下文，并不是当前的组件实例。说简单点，就是当触发该事件时，是在浏览器的总的一个环境里的，所以这时事件里如果用到this的话，this指向的其实是window。

但是这样会使得事件的使用和处理变得相当麻烦，所以这时就需要将事件内的this指针转移到事件的作用域上。

简单看一下bind()函数

调用 bind() 会创建一个新的函数，当这个新函数被调用时，函数内部的this会被置为参数提供的值。

var example = {
    value: 114514,
    getValue: function() {
        return this.value;	//这里使用了this
    }
}

var unbindThis = example.getvalue;
console.log(unbindThis()); // 调用的对象是window，所以里面的this.value => window.value
// output: undefined

var bindThis = unbindThis.bind(example);
console.log(bindThis()); // 但是bind之后，会将this的值置为example提供的值
// output: 114514