如何在React中检测Esc键按下以及如何处理

如何在reactjs上检测Esc按键？类似于jquery

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

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

我在想一种组件激活时的注册方式

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

在所有组件上

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 extends React.Component { constructor(props){ super(props); this.escFunction = this.escFunction.bind(this); } escFunction(event){ if(event.keyCode === 27) { //Do whatever when esc is pressed } } componentDidMount(){ document.addEventListener("keydown", this.escFunction, false); } componentWillUnmount(){ document.removeEventListener("keydown", this.escFunction, false); } render(){ return ( <input/> ) } }

const ActionPanel = (props) => { const escFunction = useCallback((event) => { if(event.keyCode === 27) { //Do whatever when esc is pressed } }, []); useEffect(() => { document.addEventListener("keydown", escFunction, false); return () => { document.removeEventListener("keydown", escFunction, false); }; }, []); return ( <input /> ) };