在非输入元素上反应 onKeyDown/onKeyUp 事件

Question

我需要捕获cmd按钮的上下事件，以便在setState中选择是否使用串联。我如何获得这些事件，例如，在 table 元素上？

Answer 1

您必须在 body/window 级别捕获按键。 Table 元素没有输入焦点，因此您无法从 table（没有输入元素）捕获键。

var cmdDown = false;

document.body.addEventListener('keydown', function(event) {
  var key = event.keyCode || event.charCode || 0;
  if ([91,93,224,17].indexOf(key) !== -1) {
    cmdDown = true;
  }
  console.log('CMD DOWN: ' + cmdDown.toString());    
});

document.body.addEventListener('keyup', function(event) {
  var key = event.keyCode || event.charCode || 0;
  if ([91,93,224,17].indexOf(key) !== -1) {
    cmdDown = false;
  }
  console.log('CMD DOWN: ' + cmdDown.toString());
});

Answer 2

简单示例

我认为这里的最佳做法是向 document 添加一个事件侦听器并相应地修改您的元素 (e.x. table)。用完整的 React 组件扩展 u/Hardy 的答案：

class MyComponent extends React.Component {

  // Using an arrow function. Alternatively, could bind() this 
  // function in the component's constructor
  keydownHandler = (event) => {
    // Add logic, e.x. check event.keyCode to see 
    // if CMD is pressed and then update state
  }

  componentDidMount() {
    document.addEventListener("keydown", this.keydownHandler);
  }

  componentWillUnmount() {
    this.removeEventListener("keydown", this.keydownHandler);
  }

  render() {
    <div>Hello World</div>
  }
}

备选

如, there are challenges in using keyboard events that are bound to non-input elements, as browsers require those elements to be in focus in order to invoke the bound callbacks. Another approach that seems to work is to set the tabindex property of the component to bring the element in focus. From :

render() {
  <div onKeyDown={this.keydownHandler} tabindex={-1}>Example</div>
}

这有连接到 React's Synthetic Events 的好处，即“浏览器本机事件的跨浏览器包装器”。但是，在修改 tabindex 属性时请务必注意，这可能会改变可聚焦元素的顺序，并影响用户使用键盘或辅助功能软件在您的网站中导航的能力。一些用户报告说将 tabindex 设置为 -1 可以解决此问题（请参阅之前 link 中的评论）。

在非输入元素上反应 onKeyDown/onKeyUp 事件

React onKeyDown/onKeyUp events on non-input elements

events

setstate

reactjs

简单示例

备选