イベントにメソッドを代入するときに「this」にアクセスする

Question

事前にお詫び申し上げます。私はReactを非常に新しくしています。 printDocumentで

私もthis.setPrintからoHiddFrame.onload = this.setPrint;を設定していますが、最初の割り当てにsetPrintにthisためCannot set property '__container__' of undefinedのエラーを取得しています。

render（）内のボタンにonClick={this.printDocument.bind(null, this.props.document.view_href)}を設定しています。私はそれに割り当てている実際のイベントに "これ"をバインドするにはどうすればいいですか？

多くのヘルプやアドバイスに感謝します。それ以外の場合は、正しくボタンに結合しない、onClick={this.printDocument.bind(this)}：

closePrint: function() { 
    document.body.removeChild(this.oHiddFrame.__container__); 
    }, 

    setPrint: function() { 
    this.contentWindow.__container__ = this; 
    this.contentWindow.onbeforeunload = this.closePrint; 
    this.contentWindow.onafterprint = this.closePrint; 
    this.contentWindow.focus(); 
    this.contentWindow.print(); 
    }, 

    printDocument: function (url) { 
    var oHiddFrame = document.createElement("iframe"); 
    oHiddFrame.onload = this.setPrint; 
    oHiddFrame.style.visibility = "hidden"; 
    oHiddFrame.style.position = "fixed"; 
    oHiddFrame.style.right = "0"; 
    oHiddFrame.style.bottom = "0"; 
    oHiddFrame.src = url; 
    document.body.appendChild(oHiddFrame); 
    }, 

Answer 1

ES5（古典）JavaScriptで：

onClick={this.printDocument.bind(this, this.props.document.view_href)} 

ES6（バベルで（https://babeljs.io/を） ）Javascript：

onClick={() => this.printDocument(this.props.document.view_href)} 

ES6太い矢印自動バインドこのコンテキストに関数を追加し、コードに読みやすくしてください。

詳細情報：http://exploringjs.com/es6/ch_arrow-functions.html

Answer 2

あなたのonClickはこのように見える必要があります。

printDocument()の中には、いつでもthis.propsを呼び出して、そこに必要なものを使用できます。後でメソッド内でイベントを操作することもできます。

あなたが求めているのかどうかはわかりません。

Answer 3

bindの最初の引数としてthisを渡します。最初の引数はコンテキストで、thisはバインドされた関数内にあるはずですが、現在はnullを渡しています。

イベントオブジェクトであるSyntheticMouseEventインスタンスがハンドラの最後の引数になります。あなたはそれを関数宣言に別の引数を追加して参照することができます

printDocument: function (url, event) { 
    ... 
}