Reactコールバックバインドがnullになるのはなぜですか？

Question

は作業WebpackBinは、私は2つのコンポーネントを持って

https://www.webpackbin.com/bins/-Kibrw5tNNrsQpENUv_M

、下記のリンクで見つけることができます。親コンポーネントは、子コンポーネントに関数を渡し、子コンポーネントのイベントハンドラは、func.bind(null, num)によって渡された関数を呼び出して、余分なプリセット引数を提供します。

なぜdummyFunc.bind(null, 666)が機能するのですか？bind新しく作成された関数thisのコンテキストはnullになりますか？したがって、this.setStateはすべて未定義になります。

---

親コンポーネントコード、

import React from 'react' 
import Component from './Component' 

export default class Hello extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     foo: 2 
    } 

    this.foo = this.foo.bind(this) 
    } 

    foo(newValue) { 
    this.setState({ 
     foo: newValue + this.state.foo 
    }) 
    console.log(this.state.foo) 
    } 

    render() { 
    return (
     <div> 
     <h1>App</h1> 
     <Component dummyFunc={this.foo} /> 
     </div> 
    ) 
    } 
} 

子コンポーネントコード、

import React from 'react' 

const Component = ({dummyFunc}) => { 
    return (
    <div> 
     <button onClick={dummyFunc.bind(null, 666)}>BUTTON</button> 
    </div> 
) 
} 

export default Component 

Answer 1

alert.bind（ヌル、666）が動作しますなぜ、新しく作成された関数を作る結合してはなりませんこのコンテキストはnullになりますか？

これは、バインドする関数のコンテキスト（alert）のみを変更します（新しく作成したバインド関数の場合のみ）。内部ではalertはデフォルトのコンテキストを使用しませんが、それは制限されていないため、alert関数内でコンテキストが変更されます。

このコードの目的は、alert関数の引数（部分的には666）を部分的に適用することです。その観点から

無名関数を使用する方が意味的に正しいようになります：あなたのビンであなたを

<button onClick={() => alert(666)}>BUTTON</button> 

を：

this.foo = this.foo.bind(this) 

だから、あなたが明示的にコンテキストをバインドしています。それ以降は、.bind()がそれ以上コンテキストを変更することはありません（標準に準拠しています）。