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

发布于09月09日

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

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

一旦检测到，我想把信息传给组件.我有3个组件，其中最后一个激活组件需要对escape键做出react .

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

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.key === "Escape") { //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.key === "Escape") { //Do whatever when esc is pressed } }, []); useEffect(() => { document.addEventListener("keydown", escFunction, false); return () => { document.removeEventListener("keydown", escFunction, false); }; }, []); return ( <input /> ) };

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

推荐答案

Reactjs相关问答推荐

优化、自定义登录页面、使用用户ID而不是邮箱

更新数据时有关CQR和更新UI的问题

从另一个组件更改组件中const的状态

Google Firestore无法读取图像-react

GitHub页面配置

使用VITE的Reaction应用程序的配置是否正确？

React，当我调用handleSubmit()函数时，我正在将application/json和multiform/data中的数据发送到后端，但student_image中没有数据：null

Github 操作失败：发布 NPM 包

定位数组中的一项(React、useState)

如何修复ReferenceError：在构建过程中未定义导航器

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理？

获取  不能显示为  的后代.错误，但不太确定如何构建我的代码以避免此警告

在遵循 react-navigation 的官方文档时收到警告消息

如何让 useEffect 在 React.JS 中只运行一次？

React + Redux：数据未正确传递给具有动态路由的组件

Select 项目后 Select HeadlessUI 组合框中的所有文本？

setState 改变对象引用

如何根据react 中的 map 功能一次只打开一个弹出窗口？

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用？

仅在重新渲染后设置状态