9

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

4

2 回答 2

8

您必须在正文/窗口级别捕获按键。表格元素没有输入焦点，因此您无法从表格中捕获键（没有输入元素）。

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

于 2016-08-25T03:11:29.077 回答
1

简单示例

我相信这里的最佳实践是添加一个事件侦听器document并相应地修改您的元素（例如表格）。使用完整的 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>
  }
}

选择

正如其他人所指出的那样，使用绑定到非输入元素的键盘事件存在挑战，因为浏览器需要这些元素处于焦点才能调用绑定的回调。另一种似乎可行的方法是设置tabindex组件的属性以使元素成为焦点。来自u/burak 的回答：

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

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

于 2021-08-06T17:04:55.863 回答