ES6 Reactプロパティが定義されていません

Question

私はthis codeに就職しようとしています。

/* 
* A simple React component 
*/ 
class Application extends React.Component { 
    num = 42; 
    render() { 
     return (
     <button onClick={this.show}>show</button> 
    ); 
    } 
    componentDidMount() { 
     console.log(this.num); 
    } 
    show() { 
     console.log(this.num); 
    } 
} 

/* 
* Render the above component into the div#app 
*/ 
React.render(<Application />, document.getElementById('app')); 

問題は、プロパティの値を取得するためにボタンをクリックすると、定義されていません。興味深い部分はComponentDidMount()関数がnum値にアクセスできることです。

私はshow()関数が異なるコンテキストを持っていると思うので、numをthisというキーワードで参照することはできません。私はコンストラクタのnum値をバインドしようとしましたが、どちらも機能しませんでしたので削除しました。

ボタンをクリックしてnumの値を取得するにはどうすればよいですか？

Answer 1

あなたは矢印機能

<button onClick={() => this.show()}>show</button> 

または正しいnum

参考得るためにthis

<button onClick={this.show.bind(this)}>show</button> 

の値をバインドするいずれかを使用することができます

アロー機能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functionsを

Function.bind：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

あなたは正しいです - show機能は、異なるコンテキストを持っています。

あなたはonClickコールバックにコンテキストを結合することによってこの問題を解決解決することができます：

<button onClick={this.show.bind(this)}>show</button>

Answer 3

あなたはES6の構文を使用しているので、参照して、あなたの方法にこれを自動バインドしませんリアクト：

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

このバインディングを行うには、次を参照してください。

http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

編集：https://daveceddia.com/avoid-bind-when-passing-props/