親「this」は、コンストラクタでバインドされた後の関数内の子プロップを参照していますか？

Question

私は奇妙な状況に遭遇して、なぜそれが起こっているのかわからない。 最初のコードのonPortfolioHeatChange関数では、this.propNameと入力するだけで子プロップにアクセスできるので、 "this"は子プロップを参照します。私はここでは、親のコードがあり、それは私がコンストラクタでthis.onPortfolioHeatChange = this.onPortfolioHeatChange.bind(this);を持っている理由である親のこれを参照したい：

import React, { Component, PropTypes } from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as indicesActions from '../actions/indicesActions'; 
import * as sliderActions from '../actions/sliderActions'; 
import SliderSection from './SliderSection'; 

class Home extends Component { 
    constructor(props, context) { 
     super(props, context); 

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

    onPortfolioHeatChange(sliderValues) { 
    this.props.actions.sliders.recalculatePortFolioSuccessAPI(
     { 
     heat: sliderValues[0][0], 
     weights: sliderValues.filter((val, ind) => ind !== 0).map((val, ind) => val[0]), 
     }); 
    } 

    render() { 
    return (
     <Child 
      data={this.props.data} 
      onSlidersChange={this.onPortfolioHeatChange} 
     /> 
    ); 
    } 
} 

Home.propTypes ={ 
    indices: PropTypes.array.isRequired, 
    data: PropTypes.object.isRequired, 
    loading: PropTypes.bool.isRequired, 
    actions: PropTypes.object.isRequired, 
}; 


function mapStateToProps(state, ownProps) { 
    return { 
    indices: state.indices, 
    data: state.data, 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: { 
     indices: bindActionCreators(indicesActions, dispatch), 
     sliders: bindActionCreators(sliderActions, dispatch), 
    } 
    }; 
} 

これは子供であり、それはでthis.props.onSlidersChangeへの呼び出しを持っています関数onDragStop onDragStopは孫に渡されます。私はそれがここでは関係ないと思うのでマークアップを含めなかった。

import React, { Component, PropTypes } from 'react'; 
import grandChild from './common/grandChild'; 


class Child extends Component { 
    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      sliderValues: [[100, true]], 
     } 

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

    onDragStop() { 
     this.props.onSlidersChange(this.state.sliderValues); 
    } 

    render() { 
    return (
     // some jsx grandchild 
    ); 
    } 
} 

Child.propTypes = { 
    data: React.PropTypes.object.isRequired, 
    onSlidersChange: React.PropTypes.func.isRequired, 
} 

export default Child; 

これは、子孫からonDragStopを受け取り、それをSliderに追加する孫です。

import React, { PropTypes } from 'react'; 

class Grandchild extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
    } 

    render() { 
     return (
      <Slider 
       onDragStop={this.props.onDragStop} 
      /> 
     ); 
    }; 
} 

Grandchild.propTypes = { 
    onDragStop: PropTypes.func.isRequired, 
}; 

export default Grandchild; 

Answer 1

ES6を使用してコンポーネントを書き込むときに自動反応がどのように反応するかを考えてみると、イベントハンドラ構成で明示的にバインディングを行う必要があります。 onSliderChangeプロパティの.bind（this）を確認します。 https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

render() { 
    return (
     <Child 
      data={this.props.data} 
      onSlidersChange={this.onPortfolioHeatChange.bind(this)} 
     /> 
    ); 

これはあなたの問題を解決するかどうかを知るために良いでしょう。ここでは、このための関連ドキュメントです。

Answer 2

さて、私は問題を理解しました。私がデバッグしている間、ホットリロードはファイルを更新していないようです。そのため、コンストラクタでのバインディングは、アプリを複数回再実行しても有効になりませんでした。私はまた、スライダレデューサをコンビネーションレデューサに追加することを忘れていました。これは、全く関連すべきではありませんが、助けになったかもしれません。