当記事はとてもシンプルです
今までの実装
DoneButton.js
class DoneButton extends React.Component {
state = { arg: 'Done' }
handleClick = () => {
this.setState({
arg: this.state.arg + 'だーん'
})
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.arg}
</button>
)
}
}
ReactDOM.render(<Button />, document.getElementById('root'))
今後の実装
DoneButton.js
class DoneButton extends React.Component {
state = { arg: 'Done' }
handleClick = () => {
this.setState((prevState) => {
return {
arg: prevState.arg + 'だーん'
}
})
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.arg}
</button>
)
}
}
ReactDOM.render(<Button />, document.getElementById('root'))
リファクタリング
DoneButton.js
class DoneButton extends React.Component {
state = { arg: 'Done' }
handleClick = () => {
this.setState((prevState) => ({
arg: prevState.arg + 'だーん'
}))
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.arg}
</button>
)
}
}
ReactDOM.render(<Button />, document.getElementById('root'))
handleClick
に注目してください。
取り急ぎこれぐらいにしておいて、気付きがあればまた追記します。