#9685 Updated docs for event handling #9730
Conversation
docs/docs/handling-events.md
Outdated
|
|
||
| ```js{2-5,14} | ||
| class List extends React.Component { | ||
| handleListClick (item, i, e) { |
There was a problem hiding this comment.
no space before the paren please (same for render below)
There was a problem hiding this comment.
nit: can you also change "e" to "event" for clarity?
docs/docs/handling-events.md
Outdated
| @@ -139,3 +139,29 @@ class LoggingButton extends React.Component { | |||
| ``` | |||
|
|
|||
| The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem. | |||
|
|
|||
| You can also use the `bind` method to pass arguments to your event handlers. Like you saw above, the first argument for the bind method will be the scope you want bound to your function. The last argument received by your event handler will always be the synthetic event. You have the ability to pass any number of arguments after `this` and before the event to your event handler: | |||
There was a problem hiding this comment.
Can we do:
You can also use the `bind` method to pass arguments to your event handlers, which is particularly useful for knowing which item in a list was clicked. As shown above, the first argument
docs/docs/handling-events.md
Outdated
| <ul> | ||
| {listItems.map((item, i) => { | ||
| return ( | ||
| <li key={`item-${i}`}> |
There was a problem hiding this comment.
This can be just key={i}.
|
Hi @sophiebits! All of your suggestions have been implemented. I did one additional thing in the docs. i added an example of the nested function event handling. I did a survey a few months ago about event handling and discovered that this seems to be the preferred method by many people. It totally makes sense too and I have been doing this ever since. Thank you for looking at my PR :) |
| } | ||
| ``` | ||
|
|
||
| There is one more way to do event binding that does not cause a `.bind()` to be called every on every render. You can set your event handler to a method that is an arrow function which returns nested arrow function. The ES6 syntax looks a little funny at first but it totally makes sense once you get what it is doing. The first arrow function is given the arguments you would like to access in your handler. It gets invoked immediately during the first render and returns the inner arrow function. The inner arrow function is what will be handling the click. The inner arrow function has access to the parameters passed to the outer arrow function. In JavaScript, nested functions have access to variables declared in their outer scope. It will only be called when the event occurs giving you a clean event handler: |
There was a problem hiding this comment.
After reading this over a few times, I think this is a little too complicated for this section. It's not a common pattern in my experience and also is something that someone familiar with JS functions should be able to figure out themselves if they want. Can we remove it?
|
|
||
| ```js{2-5,14} | ||
| class List extends React.Component { | ||
| handleListClick (item, i, event) { |
There was a problem hiding this comment.
please remove the space before the paren here and in render () {
|
Good morning. I can remove it. Out of curiosity, what method do you use for event binding when you need to pass an argument to the handler? I think this is the best solution and should be communicated to the masses. But I am always down to learn a better one :)
|
|
@sophiebits Any feedback on my comment? Ill make the change as soon as I hear from you :) |
|
Thank you for filing this PR! I'm sorry to be the bearer of bad news, but the documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.) Would you be willing to re-open this PR on the new repo? I promise we'll review it quickly! PS It may also help to link to this PR for the past discussion thread. |
|
I’ll take a look soon :)
…Sent from my smallest computer
On Oct 8, 2017, at 2:54 PM, Brian Vaughn <[email protected]> wrote:
Thank you for filing this PR!
I'm sorry to be the bearer of bad news, but the documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.)
Would you be willing to re-open this PR on the new repo? I promise we'll review it quickly!
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
Fixes #9624
I added an explanation and an example of using .bind to the docs to pass arguments to event handlers.