クラス構成部品の問題

import React from "react";

class App extends React.Component {
  // 상태값 num 선언
  state = {
    num: 0
  };

  // 버튼을 누르면 this.state.num을 1만큼 증가시킴
  increase() {
    this.setState(current => ({ num: current.num + 1 }));
    console.log("increase메서드의 this는", this);
  }

  render() {
    return (
      <div>
        <h1>Class Component this</h1>
        <h2>{this.state.num}</h2>
	{/* 클릭 이벤트 핸들러의 콜백으로 컴포넌트 메서드 전달 */}
        <button onClick={this.increase}>증가</button>
      </div>
    );
  }
}

export default App;

なぜ一般関数で定義したthisが間違っているのでしょうか。

class App {
  constructor(state){
    this.state = state
  }
  
  showState(){
    console.log(this.state);
  }
}

const app = new App('num');
app.showState(); // num

const showState = app.showState; 
showState(); // TypeError: Cannot read property 'state' of undefined

解決策

bind()

render() {
    return (
      <div>
        <h1>Class Component this</h1>
        <h2>{this.state.num}</h2>
        {/* 기존 increase메소드에 render()의 this인 App을 바인딩함 */}
        {/* this를 명시적으로 작성해줬기 때문에 this를 잃어버릴 일이 없음 */}
        <button onClick={this.increase.bind(this)}>증가</button>
      </div>
    );
  }

矢印関数

render() {
    return (
      <div>
        <h1>Class Component this</h1>
        <h2>{this.state.num}</h2>
        {/* 컴포넌트 메소드 앞에 붙는 요 this는 App을 가리킨다*/}
        <button onClick={() => this.increase()}>증가</button>
      </div>
    );
  }

ソース