javascript - 使用 Click 或 Escape 键调用 setState

Question

我有一个 React Modal，它通过 handler function 打开和关闭。

我想通过点击事件或使用 esc 键来调用该函数以提供辅助功能建议。

如何同时跟踪这两个事件？

到目前为止，我得到了 esc 事件:

 handleCloseModal = event => {
    if (event.keyCode === 27) {
      this.setState({ modal: false })
    }
  }

但后来我失去了点击功能

<Modal 
  onClick={handleCloseModal} 
  role="button" tabIndex={0} 
  onKeyDown={handleCloseModal}
 />

我该怎么办？

Answer 1

一个可能的解决方案是:创建一个单独的函数来关闭 Modal。将该函数用于 onClick 并在按下 esc 键时调用它。

像这样:

<Modal 
  onClick={handleCloseModal} 
  role="button" tabIndex={0} 
  onKeyDown={handleKeyDown}
/>

handleKeyDown = event => {
  if (event.keyCode === 27) {
    handleCloseModal()
  }
}

handleCloseModal = () => this.setState({ modal: false })