From 9e7f7f3e27bcb089b705f4790e5d73553132bc1b Mon Sep 17 00:00:00 2001 From: Kenneth Lum Date: Wed, 27 Jan 2021 06:00:22 -0800 Subject: [PATCH 1/2] Add an explanation here why this.handleEvent won't cause the `this` to be correctly bound Just a pitfall about the form `this.handleEvent` looking like `this.handEvent()`, with the `this.handleEvent`, when invoked, have the `this` incorrectly bound, but the form ``this.handleEvent()` in fact does have `this` correctly bound, and this may give a wrong impression. --- content/docs/handling-events.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index bef0178b910..7363db8bd33 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, as 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: From 713c5977c934535db7f8ef298b19709f60c8e408 Mon Sep 17 00:00:00 2001 From: Kenneth Lum Date: Wed, 27 Jan 2021 06:02:28 -0800 Subject: [PATCH 2/2] Update handling-events.md --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 7363db8bd33..60c4629223c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -95,7 +95,7 @@ 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, as 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. +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.