【React工作记录五十三】键盘绑定按下事件

简介: 【React工作记录五十三】键盘绑定按下事件

核心代码

componentDidMount() {
    document.addEventListener('keydown', this.handleLoginEvent);
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleLoginEvent);
  }
  handleLoginEvent = (e) => {
    if (e.keyCode === 13) {
      this.handleSubmit();
    }
  };

总结

按下回车键就会进行调用

相关文章
|
4月前
|
前端开发 开发者 UED
【第33期】一文学会用React事件
【第33期】一文学会用React事件
23 0
|
12天前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
|
15天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
1月前
|
前端开发 JavaScript 开发者
如何在React中监听键盘事件
如何在React中监听键盘事件
40 0
|
3月前
|
前端开发 JavaScript Java
react事件机制
react事件机制
39 0
|
3月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
4月前
|
前端开发 JavaScript 开发者
说说react的事件机制?
React的事件机制是一种用于处理用户界面事件的方式,它建立在原生DOM事件的基础上,提供了一种更高级、更一致的方式来处理事件。
13 0
|
前端开发 JavaScript
React学习笔记(三) 事件处理与表单元素
React学习笔记(三) 事件处理与表单元素
56 0
|
JavaScript 前端开发
React 事件与表单
## React 事件 ### 基本的事件运用 * 事件命名为驼峰式,事件处理方法命名驼峰式 handleClick, handleChange * 事件类型 ``` 鼠标类事件:onClick, onMouseOver ... 拖拽类事件:onDrop, onDrag ... 触摸类事件:onTouchMove, onTouchStart ...
2173 0