Skip to content

Commit 6dad6d2

Browse files
author
sw-yx
committed
added documentation for passing arguments to event handlers
1 parent be1f9a6 commit 6dad6d2

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

content/docs/handling-events.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,17 @@ class LoggingButton extends React.Component {
139139
```
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.
142+
143+
## Passing arguments to event handlers
144+
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:
146+
147+
```js
148+
<button onClick={() => this.deleteRow(i)}>Delete Row</button>
149+
```
150+
151+
or alternatively (especially if you want to avoid triggering a re-render in a child component):
152+
153+
```js
154+
<button onClick={this.deleteRow.bind(this,i)}>Delete Row</button>
155+
```

0 commit comments

Comments
 (0)