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

Question

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

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

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

这是我的 function：

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

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

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

Answer 1

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

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

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

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

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

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

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