Question

在我的一个组件中，我会听键盘事件，有些键会触发某些行为。

但是，一旦路由更改并且用户导航到另一个组件，我就不再想要对键盘事件做出反应。实现这一目标的唯一方法是将我的事件监听器移动到更高阶的组件，并根据当前活动路由有条件地对事件做出反应或丢弃事件吗？

这是我的最高订单组件：

  handleKeyDown(e) {
    if (e.which === 37)
      return this.fetchSibling('next');
    if (e.which === 39)
      return this.fetchSibling('previous');
  }

  componentWillMount() {
    document.addEventListener('keydown', this.handleKeyDown.bind(this));
  }

我的事件监听器，在Viewer组件中找到，但我不想在其他任何地方活动：

EA_OnNotifyContextItemModified

Answer 1

我找到的解决方案包括在卸载组件之前删除事件侦听器。但是，要做到这一点，我需要保持对事件处理程序的引用，该引用也正确地将this绑定到它。这是我使用的代码：

componentWillMount() {
    this.setState({listener: this.handleKeyDown.bind(this)}, () => document.addEventListener('keydown', this.state.listener));
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.state.listener);
    this.setState({listener: null});
  }

路线改变后停止事件监听

1 个答案: