Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lift state up - Updating the documentation to mention that onClick is a synthetic event handler #9427

Merged
merged 3 commits into from
Apr 18, 2017
Merged

Lift state up - Updating the documentation to mention that onClick is a synthetic event handler #9427

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ed9108f
Lift state up - Updating the documentation to mention that onClick is…
bytetwin Apr 14, 2017
df0a6b2
Review comments - Rephrase to handle synthetic events and event handl…
bytetwin Apr 15, 2017
a557f1e
Tweak
gaearon Apr 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/tutorial/tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,8 @@ Now we're passing down two props from Board to Square: `value` and `onClick`. Th
</button>
```

This means that when the square is clicked, it calls the onClick function that was passed by the parent. The `onClick` doesn't have any special meaning here, but it's popular to name handler props starting with `on` and their implementations with `handle`. Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class:
This means that when the square is clicked, it calls the onClick function that was passed by the parent. The `onClick` here is an
<a href="https://facebook.github.io/react/docs/events.html" target="_blank">eventhandler</a> which handles the click event and invokes the `onClick` function received in props. Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make this a little clearer, let's rephrase to:

This means that when the square is clicked it calls the onClick function that was passed by the parent. The onClick prop here is part of React's synthetic event system, which will call the function passed in when a click event is dispatched on the button.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be slightly confusing when we say onClick prop as both the Square and button has that prop. Rather rephrasing this way

The onClick prop of the button is part of React's synthetic event system, which will call the function passed in when a click event is dispatched on the button.


```javascript
handleClick(i) {
Expand All @@ -200,8 +201,7 @@ handleClick(i) {
this.setState({squares: squares});
}
```

We call `.slice()` to copy the `squares` array instead of mutating the existing array. Jump ahead a [section](/react/tutorial/tutorial.html#why-immutability-is-important) to learn why immutability is important.
It's popular to name handler props starting with `on` and their implementations with `handle`. We call `.slice()` to copy the `squares` array instead of mutating the existing array. Jump ahead a [section](/react/tutorial/tutorial.html#why-immutability-is-important) to learn why immutability is important.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add a little more context to this first sentence as well:

All of React's event handler props start with on, for example, onClick and onFocus. It's a common pattern to name the functions passed to those props starting with handle, such as handleCick for onClick or handleFocus for onFocus. It's a useful pattern for being consistent with how event handlers are defined, but it's not required.

It's a little more verbose, but I think the inline example and clarification that it's not required are useful.


Now you should be able to click in squares to fill them again, but the state is stored in the Board component instead of in each Square, which lets us continue building the game. Note how whenever Board's state changes, the Square components rerender automatically.

Expand Down