在React中的div上不工作的onKeyDown事件

Question

我想在React中的div上使用keyDown事件。我愿意：

  componentWillMount() {
      document.addEventListener("keydown", this.onKeyPressed.bind(this));
  }

  componentWillUnmount() {
      document.removeEventListener("keydown", this.onKeyPressed.bind(this));
  }      
  
  onKeyPressed(e) {
    console.log(e.keyCode);
  }
    
  render() {
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
    return (
      <div 
        className="player"
        style={{ position: "absolute" }}
        onKeyDown={this.onKeyPressed} // not working
      >
        <div className="light-circle">
          <div className="image-wrapper">
            <img src={IMG_URL+player.img} />
          </div>
        </div>
      </div>
    )
  }

它工作的很好，但我想做更多的反应风格。我试过了

onKeyDown={this.onKeyPressed}

在组件上。但它没有反应。我记得它对输入元素有效。

代码笔

我怎么做？

Answer 1

您在纯Javascript中考虑的太多了。摆脱那些React生命周期方法的侦听器，使用事件。键而不是事件。keyCode（因为这不是JS事件对象，所以它是一个事件）。您的整个组件可以像这样简单（假设您没有在构造函数中绑定方法）。

onKeyPressed(e) {
  console.log(e.key);
}

render() {
  let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
  return (
    <div 
      className="player"
      style={{ position: "absolute" }}
      onKeyDown={this.onKeyPressed}
    >
      <div className="light-circle">
        <div className="image-wrapper">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}

Answer 2

你需要这样写

<div 
    className="player"
    style={{ position: "absolute" }}
    onKeyDown={this.onKeyPressed}
    tabIndex="0"
  >

如果按下on键未绑定到此，则尝试使用箭头函数重写它或在组件构造函数中绑定它。

Answer 3

您应该使用tabIndex属性来监听React中div上的onKeyDown事件。设置tabIndex="0"应该触发处理程序。