【Reactエラー】 onClickに指定したメソッド内のthisがundefinedを返す問題

タイトルの通り。再現コードは以下。

class App extends React.Component {
  constructor() {
    super();
    
    this.hoge("constructor");
  }
  
  hoge(label) {
    console.log(label + ": ", this);
  }
  
  componentDidMount() {
    this.hoge("componentDidMount");
  }
  
  render() {
    this.hoge("render");
    
    return (
      <button onClick={this.hoge}>Click!</button>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

f:id:kosumoro:20160817233223j:plain

https://cosmology233.github.io/sandbox/hatena/2016/08/19/

画像内コンソール画面の一番下に出ている undefined はボタンをクリックした時に出力される。

ボタンクリック以外はすべて App オブジェクトが出力されている。

クリック時に発火する関数内で this を使用する場合は bind(this) を使って強制的に this を固定する。

コンストラクタ内で

constructor() {
  super();

  this.hoge = this.hoge.bind(this);
}

とするか、もしくは onClick 内で

render() {
  return (
    <button onClick={this.hoge.bind(this)}>Click!</button>
  );
}

とするかのどちらか。