Question

这是我的React课：

class Test extends React.Component {

    constructor(props) {
        super(props);

        // bind functions
        this._onClick = this._onClick.bind(this);
        this._onMouseMove = this._onMouseMove.bind(this);
        document.addEventListener("keydown", this._handleKeyDown);

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

    _handleKeyDown(e) {
        switch( e.keyCode ) {
            // If the user presses the escape key
            case 27:
                this.exitFunction(document.getElementById('test_id'));
                break;
            default: 
                break;
        }
    }

    _onClick(e) {
        // do stuff

        let cv = document.getElementById("test_id");
        this.exitFunction(cv);
    }

    exitFunction(cv) {
        console.log("in exit function");
    }
}

当我从_onClick方法调用this.exitFunction时，没有任何错误。当我从_handleKeyDown拨打电话时，出现错误消息：

未捕获的ReferenceError：未定义exitFunction
在HTMLDocument._handleKeyDown

这是因为我将监听器添加到了_handleKeyDown函数的文档中，并且使用this.exitFunction无法获得正确的上下文。

如果是这样，如何使用正确的上下文调用this.exitFunction()？

编辑：

我在构造函数中添加了_handleClick的绑定。为什么无法在addEventListener行之后添加绑定？我得到this.exitFunction是未定义的，但是如果我在addEventListener行之前添加它，则可以正常工作。

Answer 1

您需要将this中的handleKeyDown关键字绑定到组件的执行上下文。否则，this将在函数中未定义。

constructor(props) {
    super(props);

    // bind functions
    this._onClick = this._onClick.bind(this);
    this._onMouseMove = this._onMouseMove.bind(this);
    this._handleKeyDown = this._handleKeyDown.bind(this);

    document.addEventListener("keydown", this._handleKeyDown);
}

您也可以使用箭头功能以及建议的SiddAjmera。箭头函数具有词法绑定，它们隐式接收组件的执行上下文。因此，您将不需要它们将每个函数绑定到构造函数。

Answer 2

尝试改用箭头功能保留this的上下文：

class Test extends React.Component {

  constructor(props) {
    super(props);
    document.addEventListener("keydown", this._handleKeyDown);
  }

  _handleKeyDown = (e) => {
    switch (e.keyCode) {
      // If the user presses the escape key
      case 27:
        this.exitFunction(document.getElementById('test_id'));
        break;
      default:
        break;
    }
  }

  _onClick = (e) => {
    // do stuff
    let cv = document.getElementById("test_id");
    this.exitFunction(cv);
  }

  exitFunction = (cv) => {
    console.log("in exit function");
  }
}

未被捕获的TypeError：即使从另一个方法成功调用了exitFunction也不是一个函数

2 个答案: