Reactjs &引用；没有与此调用匹配的重载“；对于removeEventListener和addEventListener

我有一个keydown处理函数，定义如下：

 handleOnKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
    if (key.isEscape(e.key)) {
      stopEvent(e);
      this.props.handleClose(e);
    }
  }

我得到以下类型脚本错误：

没有与此调用匹配的重载。
重载第1个，共2个，'（键入：“keydown”，侦听器：（this:htmldevelment，ev:KeyboardEvent）=>any，options？：boolean | EventListenerOptions | undefined）：void'，出现以下错误。
类型为“（e:React.KeyboardEvent）=>void”的参数不能分配给类型为“（this:htmldevelment，ev:KeyboardEvent）=>any”的参数。
参数“e”和“ev”的类型不兼容。
类型“KeyboardEvent”缺少类型“KeyboardEvent”中的以下属性：locale、nativeEvent、isDefaultPrevented、isPropagationStopped、persist
重载2/2’（类型：string，侦听器：EventListenerOrEventListenerObject，options？：boolean | EventListenerOptions | undefined）：void’导致以下错误。
类型为“（e:React.KeyboardEvent）=>void”的参数不能分配给类型为“EventListenerOrEventListenerObject”的参数。
类型“（e:React.KeyboardEvent）=>void”不可分配给类型“EventListener”。
参数“e”和“evt”的类型不兼容。
类型“Event”缺少类型“KeyboardEvent”中的以下属性：altKey、charCode、ctrlKey、getModifierState和其他12个.ts（2769）

---

解决这个问题的办法是什么？

这个问题的答案似乎是：

---

addEventListener

和

removeEventListener

的处理程序函数不接受

React.KeyboardEvent

作为参数。它需要一个DOM事件。

您需要显示将此函数传递给removeEventListener和AddEventListener的位置。但是，错误消息很清楚<代码>类型的参数'（e:React.KeyboardEvent）=>void'不可分配给类型的参数'（this:htmldevelment，ev:KeyboardEvent）=>any.。正如jaromanda所暗示的，该错误使您看起来像是在将事件侦听器分配给不适当的HTML元素。这是否回答了您的问题？有什么解决办法吗？

componentDidMount () {
    const { current: modal } = this.modalRef;
    if (modal) {
      modal.addEventListener('keydown', this.handleOnKeyDown);
    }
  }

  componentWillUnmount () {
    const { current: modal } = this.modalRef;
    if (modal) {
      modal.removeEventListener('keydown', this.handleOnKeyDown);
    }
  }