react中元素绑定enter事件

Posted 2023-02-28

参考技术A 在项目中经常会遇到查询的功能，一般会要求有两种实现方式：一是在input输入完成后直接点击搜索按钮触发接口，二是input输入完成后直接按enter键触发接口，第一种方式很简单，这里主要写写第二种方式的处理

在js里绑定enter事件非常简单，直接在input里绑定onkeypress,onkeydown等事件，在事件里判断下e.keycode===13即可。

但是在react里,不能直接这样处理。这是因为react里的事件对象为 SyntheticEvent （合成对象），它是依据 DOM Level 3 的事件规范实现的，这样做最大的好处是可以屏蔽浏览器的差异，各种厂商的浏览器对规范的实现程度是不一样的，如果直接使用原生 DOM 事件对象的话，有些情况下你需要考虑浏览器的兼容性。而 React 通过 SyntheticEvent 已经把这些琐事帮你搞定了，在任何 React 支持的浏览器下，事件对象都有一致的接口。

React 中所有的事件处理函数都会接收到一个 SyntheticEvent 的实例 e 作为参数，如果在某些特殊的场景中，你需要用到原生的 DOM 事件对象，有两种方式可以解决。

下面是使用e.nativeEvent来处理react中绑定enter事件

注意：在react中要慎用addEventListener

React 内部自己实现了一套高效的事件机制，为了提高框架的性能，React 通过 DOM 事件冒泡，只在 document 节点上注册原生的 DOM 事件，React 内部自己管理所有组件的事件处理函数，以及事件的冒泡、捕获。

如果你通过 addEventListener 注册了某个 DOM 节点的某事件处理函数，并且通过 e.stopPropagation(); 阻断了事件的冒泡或者捕获，那么该元素下的所有节点中同类型的 React 事件处理函数都会失效。所以要慎用addEventListener注册事件，明确你自己注册的事件不会导致其他事件失效即可。

下面是使用注册事件方法

这里有点需要注意，我直接将事件注册到document上了，这里会导致在页面其他地方点击enter键也会触发搜索事件，所以在实际项目里要将事件注册到input（或者你想要绑定的元素）上面。

倘若你在react里直接绑定enter事件，没有处理事件，在handleEnterKey里获取的e会如下图，这样是没办法绑定enter事件的，因为这里的keyCode压根不是值，而是一个函数，所以e.keyCode === 13就为false了。