`this.setState`가 정의되지 않았거나 React 이벤트 핸들러의 함수가 아닌 이유는 무엇입니까?

이벤트 핸들러 내에서 React 인스턴스(this)에 액세스

문제:

이벤트 핸들러 내에서 this.setState를 사용하여 React 상태를 업데이트하면 다음과 같은 오류가 발생할 수 있습니다. "정의되지 않은 'setState' 속성을 읽을 수 없습니다." 또는 "this.setState는 함수가 아닙니다.". 이는 this 키워드가 이벤트 핸들러 내의 구성 요소 인스턴스를 참조하지 않음을 나타냅니다.

설명:

ES6 React 구성 요소에서 구성 요소에 바인딩된 함수는 this.methodName.bind(this)를 사용하여 렌더링 메서드에서 명시적으로 바인딩되거나 생성자. 이는 JavaScript 화살표 함수 구문(예: () =>)이 새 함수 범위를 생성하고 이를 구성 요소에 자동으로 바인딩하지 않기 때문입니다.

해결책:

방법 1(바인딩 생성자):

constructor(props) {
  super(props);
  this.state = { inputContent: 'startValue' };
  this.changeContent = this.changeContent.bind(this); // Binding here
}

방법 2(렌더링에 바인딩):

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

참고: React를 사용하는 경우. createClass, 모든 메소드가 자동으로 구성 요소에 바인딩됩니다. 인스턴스.

추가 수정:

React 요소 참조에 액세스하려면 코드에서 React.refs.someref를 this.refs.someref로 바꿔야 합니다. 또한 위의 바인딩 방법 중 하나를 사용하여 sendContent 메서드를 구성 요소에 바인딩해야 합니다.

위 내용은 `this.setState`가 정의되지 않았거나 React 이벤트 핸들러의 함수가 아닌 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!