类型 '(event: string) => void' 的参数不能分配给类型为"事件侦听器或事件侦听器对象"的参数

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