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

它工作正常，但我想在React风格中做得更多。我试过了

        onKeyDown={this.onKeyPressed}

在组件上。但它没有反应。我记得它适用于输入元素。

Codepen：http://codepen.io/lafisrap/pen/OmyBYG

我该怎么做？

Answer 1

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

Answer 2

你需要这样写它

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

如果onKeyPressed未绑定到this，请尝试使用箭头功能重写它，或将其绑定在组件constructor中。

Answer 3

你在纯Javascript中的想法太多了。摆脱那些React生命周期方法的监听器，并使用event.key而不是event.keyCode（因为这不是JS事件对象，它是一个React SyntheticEvent）。你的整个组件可能就像这样简单（假设你没有在构造函数中绑定你的方法）。

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={(e) => this.onKeyPressed(e)}
    >
      <div className="light-circle">
        <div className="image-wrapper">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}

Answer 4

答案

<div 
    className="player"
    onKeyDown={this.onKeyPressed}
    tabIndex={0}
>

为我工作，请注意tabIndex需要一个数字，而不是字符串，因此tabIndex =“ 0”不起作用。

Answer 5

结合使用div或tab_index="0"的{{1}}技巧是可行的，但是只要用户将非元素的视图聚焦，您就会在整个网站上看到一个难看的聚焦轮廓。可以通过将div的CSS设置为在焦点上使用tabIndex="-1"来解决此问题。

这是带有样式化组件的实现：

outline: none

并在App类中：

import styled from "styled-components"

const KeyReceiver = styled.div`
  &:focus {
    outline: none;
  }
`

Answer 6

您在构造函数中缺少方法的绑定。这就是React建议您这样做的方式：

class Whatever {
  constructor() {
    super();
    this.onKeyPressed = this.onKeyPressed.bind(this);
  }

  onKeyPressed(e) {
    // your code ...
  }

  render() {
    return (<div onKeyDown={this.onKeyPressed} />);
  }
}

还有其他方法可以执行此操作，但这将是运行时最有效的方法。

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

6 个答案: