2.7　绑定this的三种方法

在React中进行事件绑定时，常常使用onClick绑定事件处理函数。然而，在事件处理函数中，默认情况下，this指向的是undefined。这是由于babel将JavaScript代码转换为严格模式所导致的。为了解决这个问题，可以将事件处理函数中的this重新指向当前组件实例。本节将介绍三种绑定this的方法。

1．通过bind()方法绑定this

下面来看一个通过bind()方法绑定this的案例。假设我们有一个按钮组件Button，当单击按钮时，显示按钮的文本。我们可以使用bind()方法绑定事件处理函数，确保在处理函数中的this指向Button组件实例。

【代码解析】

在上面的示例中，我们在Button组件的构造函数中使用了bind()方法，将handleClick()函数的this绑定到Button组件实例。这样，在handleClick()函数中，this就可以正确引用Button组件实例，并能够通过setState()方法更新组件状态，从而改变按钮的文本。

通过使用bind()方法，可以很方便地解决React事件绑定中this指向undefined的问题，确保在事件处理函数中能够正确访问当前组件实例。这种方式不仅简单易懂，而且在实际开发中也非常常用。

总结一下，在React事件绑定中使用bind()方法是一个实用的技巧，可以确保事件处理函数中的this正确指向当前组件实例。通过这种方式，可以轻松处理事件，并拥有更多的控制权更新组件状态。

2．ES6 class fields

接下来，我们通过class fields重构上述案例，示例代码如下。

【代码解析】

在以上代码中，将handleClick事件处理函数定义为箭头函数。箭头函数本身不绑定this，而是指向上层作用域中的this。在当前代码的上层作用域中，this指向当前组件实例。通过使用箭头函数作为事件处理函数，可以确保在执行过程中this始终指向正确的组件实例，从而避免由于作用域问题而导致的错误。这种写法简洁明了，同时也提高了代码的可读性和可维护性。

3．传入箭头函数

绑定this的第三种方法是直接传入箭头函数，在箭头函数中调用事件处理函数，示例代码如下。

【代码解析】

在上述代码中，我们使用了箭头函数，并将它直接传递给onClick()方法。在箭头函数中，通过this调用handleClick()事件处理函数。这是因为箭头函数的this指向的是当前组件实例，所以事件处理函数中的this也指向同样的组件实例。 UHi//eQk2xPM1505iVgX1gihXXaqT3eEMHgCdGfoFyDOSK1I01Y+sf2oWz3dVNvV