-
[14]JSX 콜백에서 메서드 또는 이벤트 핸들러를 바인딩하는 방법dev/Web 2021. 4. 12. 19:06
3가지 방법이 존재한다.
1. Constructor에서 바인딩을 한다.
class Component extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick() { // ... } }
2. Public Class 필드 문법 - this를 사용해 바인딩 한다.
handleClick = () => { console.log('this is:', this) } <button onClick={this.handleClick}> {'Click me'} </button>
3. 화살표 함수를 사용한다.
<button onClick={(event) => this.handleClick(event)}> {'Click me'} </button>
'dev > Web' 카테고리의 다른 글
[16]합성 이벤트(synthetic events)란? (0) 2021.04.12 [15]이벤트 핸들러 또는 콜백에 매개 변수를 전달하는 방법 (0) 2021.04.12 [13]HTML과 React 이벤트 처리의 차이점 (0) 2021.04.12 [12]setState()의 인수로서 콜백 함수의 목적 (0) 2021.04.12 [11]State를 직접적으로 업데이트 하면 안되는 이유 (0) 2021.04.12