React Storeが `this`の値に対してnullを返す

Question

thisがReactコンポーネントのマイストアにnullを返している問題が発生しています。私はこれを縛る必要があると信じていますが、わかりません。また、私はReact Routerを使用しています。コンポーネントをラッパーにセットしておくと、私はそれに小道具を渡すことができます。どんな助けもありがとう！あなたが実際にそれをバインドする必要があるよう

COMPONENT

import React from 'react'; 
import PaymentStore from './../store/paymentStore'; 

class InitialPaymentScreen extends React.Component { 
    constructor(props) { 
    super(props) 
    } 
    render() { 
    console.log(this.props) 
    return (
     <div className="payment-form-submit" onClick={this.props.store.init}>Next</div> 
    ); 
    } 
} 

class PaymentForm extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <section className="main-content payment-form-wrapper"> 
     <InitialPaymentScreen store={this.props.store}/> 
     </section> 
    ); 
    } 
} 

export default class PaymentFormWrapper extends React.Component { 
    render() { 
    return (
     <PaymentForm store={PaymentStore} mode="foo"/> 
    ); 
    } 
} 

STORE

let PaymentStore = { 
    handleClickNext() { 

    console.log("hello") 

    }, 
    init() { 
    console.log(this) // returns null 
    this.handleClickNext(); // cannot read property of null 
    }, 
}; 

export default PaymentStore; 

Answer 1

が見えます。 InitialPaymentScreenだけstoreからinitを必要とする場合は、結合がPaymentFormに起こる可能性があり、InitialPaymentScreenは機能のみを受け取ることができ、あるいは、

へ

<div className="payment-form-submit" onClick={this.props.store.init.bind(this.props.store)}>Next</div> 

# or 

var init = this.props.store.init.bind(this.props.store); 
<div className="payment-form-submit" onClick={init}>Next</div> 

を変更していることを行うことができます。

javascriptはいくつかの点でよく似ているため、バインディングを行う必要があります。

一般に、関数のthisは、それが呼び出されているものに文字通り拘束されています。あなたのケースでは、store.init()は、initの機能がストアとしてthisを持つことを意味します。

ここでstore.initを変数に代入して呼び出すと、thisがわかりません。 （thisはおそらく、JSを学ぶ人のための最も一般的な問題です） - 起動時に、その関数がに保存されているどのオブジェクト見てthisを推測しようとするため

関数はそのコンテキストは、次に何を知っている作る取得するには、持っています。基本的に2つのオプション：

a。 fn.bind(something)（バインドされた関数を返す）、または

b。その1つを呼び出す無名関数を作成する