Question

我在处理文档范围的按键事件后调用React组件中的函数时遇到问题。我想在按下方向键时调用move函数，但是我得到一个错误，说它不是函数。

我知道这与绑定有关，因为当我打印＆＃34;这个＆＃34;在handleKeyPress方法中，它为我提供了文档，而不是React组件。如何正确绑定组件以便移动以便我可以这样使用它？

componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress, false);
}

handleKeyPress(e) {
  // check if pressed key was a directional key...
  var directionalKey = KEYCODES.indexOf(e.keyCode) == -1 ? false : true;

  // if so, move!
  if (directionalKey) {
    this.move(e.keyCode)
  }

  // but wait, this.move is not a function?
  console.log(this);
}

move(direction) {
  // do something...
}

谢谢！

Answer 1

确保使用正确的this调用该方法。这里有几个选项。

使用箭头功能。

componentDidMount() {
  document.addEventListener("keydown", e => this.handleKeyPress(e), false);
}

或者手动绑定它。

componentDidMount() {
  document.addEventListener("keydown", this.handleKeyPress.bind(this), false);
}

或者，如果您在Babel上使用stage-2或更高版本，则可以使用类属性箭头语法。

handleKeyPress = (e) => {
  // ...
}

componentDidMount() {
  document.addEventListener("keydown", this.handleKeyPress, false);
}

文档范围内的KeyPress调用组件函数（React）

1 个答案: