Аргумент типа '(event: string) => void' нельзя назначить параметру типа 'EventListenerOrEventListenerObject

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

Но после компиляции я получаю «Аргумент типа» (событие : 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)
}