Реагируйте утилитой на привязку этого ключевого слова

Question

У меня есть служебная функция, но this не определено, даже если я связываю ее в своем реактивном компоненте:

/util/index:

export const handleKeyPress = e =>{
  console.log(this)
}

/component/input/:

import {handleKeyPress}  from "../util/index"
class Input extends Component {
  constructor(props) {
    super(props)
    this.state = {
        isOpen: false
    }
  }
  this.handleKeyPress = handleKeyPress.bind(this)

  render(){
   return <input onKeyPress = {this.handleKeyPress} />
 }
}

Таким образом, при моем нажатии клавиши this не определено в функции, даже если я связываю ее внутри своего конструктора. Что я могу сделать?

Answer 1

    import { handleKeyPress } from "../util/index"
    class Input extends Component {
      constructor(props) {
        super(props)
        this.state = {
          isOpen: false
        }
      }

      render() {
        return <input onKeyPress={(e) => handleKeyPress(e)} />
      }
    }

удалить это из вызывающей функции и удалить строку функции связывания

Answer 2

Если вы не хотите писать bind в конструкторе, вы можете написать свое событие с помощью функции стрелки.

render()
return <input onKeyPress = {() => 
this.handleOnKeyPress() }/>
 } 

После этого вы можете удалить строку кода привязки компонента.