From ed9108fad8018f3874a4f2ebf61a994c32acb87e Mon Sep 17 00:00:00 2001 From: Hanu Date: Fri, 14 Apr 2017 09:00:36 +0530 Subject: [PATCH 1/3] Lift state up - Updating the documentation to mention that onClick is a synthetic event handler --- docs/tutorial/tutorial.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 25cfa29dd5ee8..6e791d8060621 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -191,7 +191,8 @@ Now we're passing down two props from Board to Square: `value` and `onClick`. Th ``` -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 +eventhandler 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: ```javascript handleClick(i) { @@ -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. 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. From df0a6b2096ac371d5082d833e6589249b26d4cf5 Mon Sep 17 00:00:00 2001 From: hanumanthan Date: Sat, 15 Apr 2017 09:25:19 +0530 Subject: [PATCH 2/3] Review comments - Rephrase to handle synthetic events and event handler patterns --- docs/tutorial/tutorial.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 6e791d8060621..88781f7a5acbb 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -191,8 +191,7 @@ Now we're passing down two props from Board to Square: `value` and `onClick`. Th ``` -This means that when the square is clicked, it calls the onClick function that was passed by the parent. The `onClick` here is an -eventhandler 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: +This means that when the square is clicked, it calls the `onClick` function that was passed by the parent. The `onClick` prop of the button is part of of React's synthetic event system which will call the function passed in when a click event is dispatched on the button. Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class: ```javascript handleClick(i) { @@ -201,7 +200,7 @@ handleClick(i) { this.setState({squares: squares}); } ``` -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. +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.. 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. 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. From a557f1e2d07bec70e98301d207ed7b243ebf05e6 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 18 Apr 2017 16:26:11 +0100 Subject: [PATCH 3/3] Tweak --- docs/tutorial/tutorial.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 88781f7a5acbb..d0c1d18402e2d 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -183,7 +183,7 @@ And change Square to use `this.props.value` again. Now we need to change what ha return this.handleClick(i)} />; ``` -Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. So let's do that by changing `render` in Square to have: +Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. So let's replace the `this.setState()` call we used to have inside the button click handler in Square's `render()` with a call to `this.props.onClick()`: ```javascript ``` -This means that when the square is clicked, it calls the `onClick` function that was passed by the parent. The `onClick` prop of the button is part of of React's synthetic event system which will call the function passed in when a click event is dispatched on the button. Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class: +Now when the square is clicked, it calls the `onClick` function that was passed by Board. Let's recap what happens here: + +1. The `onClick` prop on the built-in DOM `