“（事件：字符串）=> void”类型的参数不可分配给“EventListenerOrEventListenerObject”类型的参数

【问题标题】：Argument of type '(event: string) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject“（事件：字符串）=> void”类型的参数不可分配给“EventListenerOrEventListenerObject”类型的参数
【发布时间】：2020-07-19 10:05:50
【问题描述】：

我在我的 div 中添加了一个事件监听器。

componentWillMount() {
    document.addEventListener('keyPress', this.handleKey, false)
  }

componentWillUnmount() {
    document.removeEventListener('keyPress', this.handleKey, false)
  }

这是我的功能：

handleKey = (event: string) => {
   console.log(event)
  }

render(){
  return(
      <div className={classes.scAccountDropDown} onKeyDown={(event: any) => this.handleKey(event.key)}>
)

但编译后我得到“类型的参数'（事件：字符串）=> void'不可分配给类型的参数'EventListenerOrEventListenerObject。”

【问题讨论】：

您有 event: string，但您将其指定为侦听器，因此您将收到 Event 类型。

标签： javascript node.js reactjs typescript

【解决方案1】：

这里的问题是，在render 内部，您将string 作为参数传递给handleKey 函数：

onKeyDown={(event: any) => this.handleKey(event.key)}

但是，在componentWillMount 和componentWillUnmount 中，您都将实际的KeyboardEvent 事件传递给handleKey 函数，这导致了这个问题。您可以通过更新它们来解决此问题：

componentWillMount() {
  document.addEventListener('keyPress', (e: any) => this.handleKey(e.key), false)
}

componentWillUnmount() {
  document.removeEventListener('keyPress', (e: any) => this.handleKey(e.key), false)
}

您还可以更新handleKey() 函数，以明确您将key 作为此函数的参数，而不是实际事件。

handleKey = (key: string) => {
   console.log(key)
}

【讨论】：