◾️ Reactでcallback functionをbindなしで呼出す方法→ arrow function利用
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// callback bind
// this.handleClick = this.handleClick.bind(this);
}
// handleClick() {
// this.setState(prevState => ({
// isToggleOn: !prevState.isToggleOn
// }));
// }
handleClick = () => {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);