关于react中按键事件的疑问

#1

最近遇到一个关于按键事件的问题,暂时未搞明白是怎么回事,希望有高人能指点一二

场景描述

在react项目中对一个原生input组件绑定onBlur, onKeyDownonKeyUp这3个props对应的handler,但是在这个组件中按下esc键的时候却只触发了blur事件的handler,keydown和keyup事件的handler都没触发,如果在react框架之外对其事件绑定处理方案,按下esc键的时候会触发了keydown事件的keyup事件,但是没有触发blur事件

暂时还没查到具体原因,希望有明白的大神指点一下

写了一个简单的demo,可打开控制台观察结果。如下:

https://s.codepen.io/RunningCoderLee/debug/EERMGX/mVAbGEybexjk

#3

初步找到了原因,应该是chrome插件导致默认行为有所更改

在chrome的无痕模式下重新测试,得到结果为在react框架中绑定事件,input输入框获焦状态下按esc后,事件触发顺序为keyDown -> keyup,并且没有触发失焦效果和失焦事件

由于我安装了某个插件导致在input获焦时按下esc后会触发失焦行为,同时触发失焦事件