反応クラスとJSXイベントの内部でバインドはどのように機能しますか？

Question

私はそれがnullを出力​​内thisをログインしたとき、私は結合を接続するために必要であることを理解して..

を

class Toggle extends Component { 

    constructor(props){ 
    super(props); 

    //this.handleClick = this.handleClick.bind(this); 
} 


handleClick() { 

    console.log(this); 

} 


render() { 
    return (
     <button onClick={this.handleClick}> 
      ... 
     </button> 
    ); 
} 

} 

コメント結合の必要性を理解するためにここにしようとしています​​メソッドからToggleオブジェクトへ

ログは、グローバルオブジェクトを出力するように、​​が呼び出された場所を探してはいけませんか？

それとも、それは出力がそれだろうようToggleオブジェクトにあっ参照する他のthisあるonClick内​​を起動し「何のために見ている必要がありますか？

Answer 1

Toggleに​​をバインドすると、stateにvalueプロパティを記録しようとしたときに、以下のように実際にクラスにバインドされます。それ以外の場合はエラーが発生し、ブラウザのコンソールで確認できます（コードスニペットではありません）。

は、私は100％わからないんだけど、なぜにconsole.log（これは）unbinded​​（this postのOPが持っていた同様の問題）にundefinedを返しますが、私の推測では、それはそれとして、ヌルコンポーネントを参照していることが考えられていることthisの値はundefinedです。

class Toggle extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { value: 'hi' } 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick() { 
 
    console.log(this.state.value); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={this.handleClick}> 
 
      Hello 
 
     </button> 
 
     <NullComponent /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
let NullComponent =() => { 
 
    console.log('calling from null component ', this); 
 
    return null; 
 
} 
 

 
ReactDOM.render(<Toggle />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>