将方法分配给事件时，在react中访问“this”

IT技术 javascript reactjs jsx
2021-05-20 20:03:08

提前道歉，我对 React 很陌生。

在printDocument我设置oHiddFrame.onload = this.setPrint; 甚至this.setPrint，但我得到的误差Cannot set property '__container__' of undefined为this在setPrint第一个任务。

我正在onClick={this.printDocument.bind(null, this.props.document.view_href)}渲染（）中的按钮上设置。如何将“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);
  },
3个回答

在ES5（经典）Javascript 中：

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

在ES6（使用babel（https://babeljs.io/））Javascript 中：

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

ES6 粗箭头自动将此上下文绑定到函数，并增加代码的可读性。

更多信息： http : //exploringjs.com/es6/ch_arrow-functions.html

你的 onClick 需要看起来像这样：onClick={this.printDocument.bind(this)}，否则它不会正确绑定到按钮。

在printDocument()方法内部，您可以随时调用this.props和使用您需要的任何内容。之后您还可以直接在方法内部操作该事件。

不确定这是否是您要问的。

this作为第一个参数传递给bind. 第一个参数是上下文，this应该是绑定函数内部的内容，但您当前正在传递null.

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

事件对象，一个SyntheticMouseEvent实例，将是处理程序的最后一个参数。您可以在函数声明中添加另一个参数并引用它：

 printDocument: function (url, event) {
   ...
 }
其它你可能感兴趣的问题
上一篇405 - 用于访问此页面的 http 动词在 reactjs 应用程序中不允许使用 iis 下一篇使用 Marlin 和 RAMPS 1.4 自动调平不起作用