컨텍스트 오류를 ​​피하기 위해 React 이벤트 핸들러에서 `this`를 올바르게 바인딩하려면 어떻게 해야 합니까?

React 이벤트 핸들러의 이 모호함을 이해하세요

React에서 이벤트 핸들러를 구성 요소 인스턴스에 바인딩하면 이 컨텍스트에 액세스할 수 있습니다. 그러나 개발자가 이벤트 핸들러 함수 내에서 this.setState 또는 this.refs에 액세스하려고 하면 오류가 발생할 수 있습니다. 이 문제는 구성 요소 인스턴스에 암시적으로 바인딩될 때 이에 대한 모호함에서 비롯됩니다.

이 문제를 해결하려면 소품으로 전달하기 전에 이벤트 핸들러 함수를 구성 요소 인스턴스에 바인딩하세요. 이렇게 하면 함수 본문 내의 this 변수가 전역 창 객체가 아닌 구성 요소 인스턴스를 참조하게 됩니다.

React의 ES6 클래스 구문을 사용할 때 이 바인딩은 다음을 통해 생성자에서 달성될 수 있습니다.

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}

또는 React.createClass 메서드를 사용하면 이벤트 핸들러가 자동으로 구성 요소 인스턴스에 바인딩됩니다. 그러나 다음 사항에 유의하는 것이 중요합니다.

• 함수를 바인딩하면 새 함수가 생성되므로 생성자에서 바인딩하거나(한 번 실행) 렌더링에서 직접 바인딩하는 것이 좋습니다(렌더링할 때마다 새 함수 생성).

생성자 바인딩 예:

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

렌더링 예 바인딩:

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

추가로, 이벤트 핸들러 내의 구성요소 참조에 액세스할 때 React.refs 대신 this.refs를 참조하세요.

위 내용은 컨텍스트 오류를 ​​피하기 위해 React 이벤트 핸들러에서 `this`를 올바르게 바인딩하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!