Reactjs 在模态组件中放置ESC键以及如何测试ESC键

我构建了一个模态组件，并在ModalContainer组件中添加了ESC键控行为，如下所示：

componentDidMount() {
  window.addEventListener('keydown', this.handleKeyDown);
}

handleKeyDown(event) {
  if (event.keyCode !== 27) return;
  this.props.hideAuthModal();
  window.removeEventListener('keydown', this.handleKeyDown);
}

这是工作良好的预期

我在尝试测试这种行为时遇到的问题是，我没有一个元素来模拟带有酶的键控事件，因为该事件绑定到

窗口

我也不确定在

容器

组件中使用此方法的方法是否理想，因为此

容器

组件还包含与Redux的连接，因此我不确定是否应该以我现在的方式测试此组件

因此，我的主要问题是：

我（理想情况下）应该把这个keydown事件处理程序（方法）放在哪里？我应该如何实施它

我应该如何测试当按下键时，它将使用jest+酶调用正确的方法

我应该使用这个容器组件来管理模态组件的state和Redux道具吗

我不太确定容器/无状态组件的用法，所以我在这里也要问：我是否应该始终将容器组件中的所有状态管理和方法与表示组件分开，仅用于接收道具和显示数据

编辑：

---

正如@Jackyef所说，我可以将keydown事件绑定到模态组件的最外层div，以便在测试时模拟事件。不过，我还需要其他问题的答案。这样做是否更正确？

您可以将

onKeyPress

处理程序附加到最外层的

div

上，并在那里处理您的逻辑。这样，您可以在测试时模拟按键。

是的，我也考虑过，但不确定这是最好的方法。但是我还需要其他问题的答案。。