Skip to content

Commit db1262d

Browse files
authored
Tweak the event doc
1 parent ad8cb6e commit db1262d

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

content/docs/handling-events.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,15 @@ class LoggingButton extends React.Component {
140140

141141
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 class fields syntax, to avoid this sort of performance problem.
142142

143-
## Passing arguments to event handlers
143+
## Passing Arguments to Event Handlers
144144

145-
Inside a loop it is common to want to pass a param to an event handler. For example, if `i` is the row id, either of the following would work:
145+
Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
146146

147147
```js
148-
<button onClick={() => this.deleteRow(i)}>Delete Row</button>
149-
<button onClick={this.deleteRow.bind(this, i)}>Delete Row</button>
148+
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
149+
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
150150
```
151+
152+
The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
153+
154+
In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.

0 commit comments

Comments
 (0)