时间戳

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

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

问题描述

我在我的 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的参数。”

标签： javascriptnode.jsreactjstypescript

解决方案

这里的问题是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)
}

推荐阅读