react 中 onKeyDown,onKeyUp,onKeyPress事件

Posted 2023-03-25

参考技术A 如下图：

可知，keyPress事件的charCode与keyCode 是和  keyDown keyUp事件相反的

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

【中文标题】对非输入元素反应 onKeyDown/onKeyUp 事件

【英文标题】：React onKeyDown/onKeyUp events on non-input elements

【发布时间】：2017-01-01 07:59:19

【问题描述】：

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

【问题讨论】：

替代解决方案：onKeyDown event not working on divs in React

【参考方案1】：

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

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

【讨论】：

这是唯一的方法吗？我必须在 componentDidMount 内的 body 中添加监听器？

React 是 javascript.. 所以是的！只需在componentDidMount 中添加侦听器并在组件卸载时将其删除..

【参考方案2】：

简单示例

我相信这里的最佳做法是向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>
  

另类

作为others have noted，使用绑定到非输入元素的键盘事件存在挑战，因为浏览器需要这些元素处于焦点才能调用绑定的回调。另一种似乎可行的方法是设置组件的tabindex 属性以使元素成为焦点。来自u/burak's answer：

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

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

【讨论】：

这只是解决方案的一部分，因为它也会影响输入字段

@BenjaminK 你能详细说明一下吗？