/
App.js
36 lines (32 loc) · 1006 Bytes
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { Fragment, Component } from 'react';
export default class App extends Component {
state = {
first: 0,
second: 0,
third: 0
};
// This function is defined as an arrow function, so "this" is
// lexically-bound to this component. The name argument is used
// by the function that's returned as the event handler in the
// computed property name.
onClick = name => () => {
this.setState(state => ({
...state,
[name]: state[name] + 1
}));
};
render() {
const { first, second, third } = this.state;
return (
<Fragment>
{/* By calling this.onClick() and supplying an argument value,
you're creating a new event handler function on the fly. */}
<button onClick={this.onClick('first')}>First {first}</button>
<button onClick={this.onClick('second')}>
Second {second}
</button>
<button onClick={this.onClick('third')}>Third {third}</button>
</Fragment>
);
}
}