이 글은 주로 React 학습에서 이벤트 바인딩을 위한 여러 가지 방법을 비교하여 소개합니다. 샘플 코드를 통해 매우 자세하게 소개되어 있어 모든 사람의 학습이나 업무에 도움이 되기를 바랍니다. React 이벤트 바인딩 방법에 대한 더 깊은 이해.
React 이벤트 바인딩
클래스 메소드는 기본적으로 이것을 바인딩하지 않기 때문에 호출 시 바인딩하는 것을 잊어버리면 this의 값이 정의되지 않습니다.
보통 직접 호출되지 않는 경우 메서드에 바인딩되어야 합니다. 여러 바인딩 방법이 있습니다:
1. 생성자에서 이것을 바인딩하려면
class Button extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log('this is:', this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } }
2. 호출할 때 바인딩을 사용하세요.
class Button extends React.Component { handleClick(){ console.log('this is:', this); } render() { return ( <button onClick={this.handleClick.bind(this)}> Click me </button> ); } }
3을 호출할 때 화살표 함수를 사용하세요. 4. 속성 초기화 구문을 사용하여 이것을 바인딩합니다(실험적)
class Button extends React.Component { handleClick(){ console.log('this is:', this); } render() { return ( <button onClick={()=>this.handleClick()}> Click me </button> ); } }
Comparison
메서드 2와 3 모두 호출 시 이것을 바인딩합니다.
jQuery 이벤트 바인딩 기능에 대한 기본 설명
jQuery에서 구현한 기본 이벤트 바인딩 기능에 대한 자세한 설명
ES6에서 javascript에서 구현한 함수 바인딩 및 클래스 이벤트 바인딩 기능에 대한 자세한 설명
위 내용은 React 이벤트 바인딩의 여러 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!