버튼에 이벤트 핸들러 넣는 방법은 아래와 같음
- 버튼을 만든다 (<button>
- 버튼을 클릭했을때 함수를 만든다 (handleClick)
- 버튼에 클릭할때 함수를 설정한다 (onClick)
- 바인딩 한다 (this.handleClick.bind(this))
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
'Web 개발 > React' 카테고리의 다른 글
[React] Javascript Map 사용하는 방법 (List) (0) | 2020.02.02 |
---|---|
[React] JSX 안에 && 연산자로 If-Else를 인라인으로 표현 (+조건부 연산자) (0) | 2020.02.01 |
[React] 조건부 렌더링 (로그인/게스트 or login/logout 버튼) (0) | 2020.02.01 |
[React] 이벤트 핸들러에 인자 전달 (0) | 2020.02.01 |
JavaScript 3항 연산 (0) | 2020.02.01 |