Javascript 如何检测Esc按键反应以及如何处理

如何检测reactjs上的Esc按键？与jquery类似

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

$（文档）.keyup（函数（e）{
如果（e.keyCode==27）{//转义键映射到keyCode`27`
// 
}
});

一旦检测到，我想将信息向下传递到组件。我有3个组件，其中最后一个激活组件需要对escape键按下做出反应

我想在组件激活时进行一种注册

class Layout extends React.Component {
  onActive(escFunction){
    this.escFunction = escFunction;
  }
  onEscPress(){
   if(_.isFunction(this.escFunction)){
      this.escFunction()
   }
  }
  render(){
    return (
      <div class="root">
        <ActionPanel onActive={this.onActive.bind(this)}/>
        <DataPanel onActive={this.onActive.bind(this)}/>
        <ResultPanel onActive={this.onActive.bind(this)}/>
      </div>
    )
  }
}

类布局扩展了React.Component{
onActive（ESC功能）{
this.escFunction=escFunction；
}
onEscPress（）{
if（u.isFunction（this.esc函数））{
this.esc函数（）
}
}
render（）{
返回(
)
}
}

在所有组件上

class ActionPanel extends React.Component {
  escFunction(){
   //Do whatever when esc is pressed
  }
  onActive(){
    this.props.onActive(this.escFunction.bind(this));
  }
  render(){
    return (   
      <input onKeyDown={this.onActive.bind(this)}/>
    )
  }
}

class ActionPanel扩展了React.Component{
esc函数（）{
//按esc键时执行任何操作
}
onActive（）{
this.props.onActive（this.escsfunction.bind（this））；
}
render（）{
报税表（
)
}
}

---

我相信这会奏效，但我认为这更像是一次回调。有没有更好的方法来处理这个问题？

您需要从

onKeyDown

中收听escape的

keyCode

（27）：

const EscapeListen = React.createClass({
  handleKeyDown: function(e) {
    if (e.keyCode === 27) {
      console.log('You pressed the escape key!')
    }
  },

  render: function() {
    return (
      <input type='text'
             onKeyDown={this.handleKeyDown} />
    )
  }
})

const EscapeListen=React.createClass({
handleKeyDown：功能（e）{
如果（例如keyCode===27）{
console.log（'您按了退出键！'）
}
},
render:function（）{
返回(
)
}
})

---

在问题的注释中发布有助于找到其他键的键代码。

如果您正在寻找文档级键事件处理，那么在

componentDidMount期间绑定它是最好的方法（如所示）：

React用于包装本机浏览器事件，此合成事件提供，

您可以这样使用：

handleOnKeyDown = (e) => {
  if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
    // select item
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    // go to top item
    e.preventDefault();
  } else if (e.key === 'ArrowDown') {
    // go to bottom item
    e.preventDefault();
  } else if (e.key === 'Escape') {
    // escape
    e.preventDefault();
  }
};

在功能组件中实现这一点的另一种方法是使用
useffect
和
useffection
，如下所示：

handleOnKeyDown = (e) => {
  if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
    // select item
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    // go to top item
    e.preventDefault();
  } else if (e.key === 'ArrowDown') {
    // go to bottom item
    e.preventDefault();
  } else if (e.key === 'Escape') {
    // escape
    e.preventDefault();
  }
};

import React，{useffect}来自“React”；
常量应用=（）=>{
useffect（（）=>{
const handleEsc=（事件）=>{
如果（event.keyCode===27）{
console.log（'Close'）
}
};
window.addEventListener（'keydown'，handleEsc）；
return（）=>{
window.removeEventListener（'keydown'，handleEsc）；
};
}, []);
返回（按ESC键以控制台日志“关闭”
）；
}

您可以使用
useState
而不是console.log来触发某些内容。
用于可重用的React钩子解决方案

import React, { useEffect } from 'react';

const useEscape = (onEscape) => {
    useEffect(() => {
        const handleEsc = (event) => {
            if (event.keyCode === 27) 
                onEscape();
        };
        window.addEventListener('keydown', handleEsc);

        return () => {
            window.removeEventListener('keydown', handleEsc);
        };
    }, []);
}

export default useEscape

用法：

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false))

如果你想让它直接在你的组件中工作，而不是在一个钩子中工作，或者如果你像我一样在一个不返回a的钩子中使用它，你没有通量实现来存储哪个是活动组件而不是这样做吗？@BenHare:我对它还是相当陌生的。我正在研究迁移到React的可行性。我没有试过flux，所以你建议我应该研究flux的解决方案。PS：检测ESC按键怎么样？只是想澄清一下，您是否在文档级别寻找按键检测，比如第一个代码块？或者这是一个输入字段？你也可以这样做，我只是不知道如何给出答案。这里有一个快速文档级别示例：文档级别可以：）我认为值得补充的是，当按下的键是ESC且焦点在
内时，React似乎不会触发
onKeyPress
事件。在这种情况下，您可以使用
onKeyDown
和
onkeydup
，这两种方法都会按正确的顺序启动。
event.keyCode
不推荐使用，您应该使用
event.key
，当Esc关闭时，该键将返回
Escape
。在
addEventListener
和
removeEventListener
中的第三个参数是什么？@jhuang-可以是其他参数useCapture@jhuanguseCapture参数指定是否捕获事件。它与
keydown
无关，但它通常是为了与IENo兼容而指定的，因此需要将'false'作为第三个参数。默认为false。@cwj它必须是添加到事件侦听器和删除到事件侦听器的同一个函数。在本例中，您是对的，因为
useffect
只运行一次，但我总是将生成的函数包装在
useCallback
中，以养成良好的习惯。如果您需要支持IE9和/或Firefox 36或更低版本，这是一个有趣的事实，
e.key
for
Escape
返回为
Esc
#触发解决方案不允许更改onEscape功能。您应该使用memo并将onEscape作为useEffect@Neo您能详细说明一下吗？如果在加载后将onEscape属性更改为其他属性，它仍将继续调用原始onEscape。然而，除非您正在编写一个库，否则这是一个非常不寻常的用例，因此我本人不会费心添加复杂性，除非我需要它。@KevinLe Khnle const onEscape useCallback（（）=>setIsOpen（false），[]）useScape（onEscape）和inside useScape effect const useScape=（onEscape）=>{useffect（（）=>{mode code}，[onEscpae]）
const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false))

useEffect(()=>{
    document.addEventListener('keydown', (e) => {
      e.key === 'Escape' && setOpenState(false)
    })
    return () => {
      document.removeEventListener('keydown', (e) => e)
    }
  },[openState])