React Componentでthisがundefinedになる問題の解決策 - 株式会社クラフトマンソフトウェア

最近、ShouldBeeのUIをReact.jsで作り始めています。 Babelを使ってES6のclass構文でReactのComponentを作っているのですが、どうもコールバックのメソッドでthisがundefinedになってしまいます。 例えば、下のJSはボタンのコンポーネントで、クリックしたときに、onClickメソッドが呼ばれます。onClickメソッドの中で、thisを参照していますが、undefinedになります。 import React from "react"; export default class Button extends React.Component { onClick() { console.log(this); // undefined } render() { return ( <button onClick={this.onClick}>Butto

[simplestreet]

便利便利

[kazuph1986]

stage-0を追加していると“onClick={::this.onClick}”と書くだけでbindされる。

[tuki0918]

“this.onClick = this.onClick.bind(this);”