microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix typo in README (#127)

Browse Source
This commit is contained in:
Li Li
2019-08-19 08:00:01 -07:00
committed by Micah Godbolt
parent 00ea1f5521
commit 6de6cb0f1e
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
step1-04/demo/README.md
View File

@@ -203,11 +203,11 @@ render() {
### Writing our button click handler ### Writing our button click handler
Our next step is to wire up the button to increment the `counter` in our component state. Our next step is to wire up the button to increment the `clicks` in our component state.
> By convention we place other methods below `render()`, and private methods (those for internal use only) are prefixed with an underscore. > By convention we place other methods below `render()`, and private methods (those for internal use only) are prefixed with an underscore.
This function will update our component's state, incrementing the counter value by 1. (Note that `setState` only modifies the values of keys listed in the object passed as its parameter.) This function will update our component's state, incrementing the clicks value by 1. (Note that `setState` only modifies the values of keys listed in the object passed as its parameter.)
```jsx ```jsx
_onButtonClick = () => { _onButtonClick = () => {
@@ -219,7 +219,7 @@ _onButtonClick = () => {
> This isn't exactly a method, but a class property that is set to an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). This mostly works the same as `onButtonClick() { }` but eliminates the need for [extra boilerplate](https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb) used to avoid potential "gotchas" with [how `this` works in JavaScript](https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85).) > This isn't exactly a method, but a class property that is set to an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). This mostly works the same as `onButtonClick() { }` but eliminates the need for [extra boilerplate](https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb) used to avoid potential "gotchas" with [how `this` works in JavaScript](https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85).)
> Note that the `setState` call could also be written as `this.setState(prevState => ({ counter: prevState.counter + 1 }));` to ensure that state is not updated until the previous state has been determined. > Note that the `setState` call could also be written as `this.setState(prevState => ({ clicks: prevState.clicks + 1 }));` to ensure that state is not updated until the previous state has been determined.
Now that we have a function to increment our count, all that's left is to connect it to our button. Now that we have a function to increment our count, all that's left is to connect it to our button.