Question

我已将事件侦听器添加到我的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)}>
)

但是在编译后，我得到“类型'（event：string）=> void的参数不能分配给'EventListenerOrEventListenerObject类型的参数”。

Answer 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)
}

类型'（event：string）=> void'的参数不能分配给'EventListenerOrEventListenerObject类型的参数

1 个答案: