Zugriff auf "this" in reagieren beim Zuweisen von Methode zu einem Ereignis

Question

Entschuldigung im Voraus, ich bin sehr neu zu Reagieren.

In printDocument Ich gründe die oHiddFrame.onload = this.setPrint; sogar this.setPrint aber einen Fehler von Cannot set property '__container__' of undefined für this in setPrint auf der ersten Zuordnung bin immer.

I onClick={this.printDocument.bind(null, this.props.document.view_href)} auf die Schaltfläche in machen bin Einstellung(). Wie verbinde ich "this" mit dem tatsächlichen Ereignis, dem ich es zuweise?

Vielen schätzen jede Hilfe oder Beratung.

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

In ES5 (klassische) Javascript:

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

In ES6 (mit babel (https://babeljs.io/)) Javascript:

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

ES6 Fett-Pfeile Auto-bind diesen Zusammenhang mit der Funktion, und die Lesbarkeit zu Code hinzuzufügen.

Weitere Informationen:http://exploringjs.com/es6/ch_arrow-functions.html

Answer 2

Ihre onClick muss wie folgt aussehen: onClick={this.printDocument.bind(this)}, sonst wird es nicht korrekt an die Taste binden.

Innerhalb printDocument() Methode, können Sie immer anrufen this.props und verwenden, was auch immer Sie dort brauchen. Sie können das Ereignis auch direkt innerhalb der Methode bearbeiten.

Nicht sicher, ob Sie das fragen.

Answer 3

Pass this als erstes Argument zu bind. Das erste Argument ist der Kontext, was this innerhalb der gebundenen Funktion sein sollte, aber Sie passieren gerade null.

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

Das Ereignisobjekt, ein SyntheticMouseEvent Beispiel wird das letzte Argument zu Ihrem Handler sein. Sie können ein weiteres Argument für die Funktionsdeklaration hinzufügen, und verweisen Sie:

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