diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index bef0178b910..60c4629223c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -95,6 +95,8 @@ ReactDOM.render( You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called. +A special note here is, `this.handleEvent` may appear in the form of `this.handleEvent()`, so it may give the impression that when `handleEvent` is invoked, the `this` is bound to the correct object. However, this is not the case, as `this.handleEvent` is first evaluated to be a reference to a function object, so it is similar to assigning `this.handleEvent` to `fn`, and then using `onClick={fn}`, and in this case, we can clearly see that the `this` will not be correctly bound. + This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method. If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks: