React 中多个键的事件监听器？

Question

我想要一个事件侦听器来检测何时按下 command+c，以便我可以将某些内容复制到剪贴板。如何监听多个键？我尝试过使用 useState、useEffect 和 document.addEventListener，但没有成功。这是我的代码：

const [metaPressed, setMetaPressed] = useState(false)

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      
      if (e.key === 'Meta') setMetaPressed(true)
        
    })
  })

  useEffect(() => {
    document.addEventListener('keyup', (e) => {

      if (e.key === 'Meta') setMetaPressed(false)
      
    })
  })

Answer 1

有效吗？

useEffect(() => {
    document.addEventListener('keydown', (e) => {  
        e.preventDefault();
        if ((e.metaKey || e.ctrlKey) && e.code === 'KeyC') {
            console.log('fire!')
        }  
    })
})

Answer 2

这段代码非常简单：由于计算机一次只传递一次击键，因此创建了一个数组来跟踪多个键。然后可以使用该数组一次检查一个或多个键。

  var map = {}; // You could also use an array
  onkeydown = onkeyup = function(e){
  e = e || event; // to deal with IE
  map[e.keyCode] = e.type == 'keydown';
    /* insert conditional here */
}

只是为了解释一下，假设您按下 A 和 B，每个按钮都会触发一个 keydown 事件，将 map[e.keyCode] 设置为 e.type == keydown 的值，计算结果为 true或假的。现在 map[65] 和 map[66] 都设置为 true。当你放开 A 时，keyup 事件被触发，导致相同的逻辑为 map[65] (A) 确定相反的结果，现在它是 false，但由于 map[66] (B) 仍然是“down”（它没有触发 keyup 事件），它仍然是真的。现在要将输入元素内的文本复制到剪贴板，我们将制作一个输入元素

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

现在 CTRL 的代码是 17，C 是 67.You 可以试试这个，它会复制输入元素中写入的任何内容。

if(map[17] &&  map[67]){ // CTRL+C
    alert('Control Shift C');
    var copyText = document.getElementById("myInput");
    copyText.select();
    copyText.setSelectionRange(0, 99999)
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

React 中多个键的事件监听器？

Event listener for multiple keys in React?

javascript

event-handling

dom-events

reactjs