react中元素绑定enter事件

在项目中经常会遇到查询的功能，一般会要求有两种实现方式：一是在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 事件对象，有两种方式可以解决。

简单的搜索页面

//html代码如下

 查询

第一种：通过 e.nativeEvent 来获取。

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

constructor(props){
  this.myRef = React.createRef()
}
//搜索触发接口
onSearchText(){
   //当一个 ref 属性被传递给一个 render 函数中的元素时，
   // 可以使用 ref 中的 current 属性对节点的引用进行访问。
    let val = this.myRef.current.input.value
    if(!val.trim()){
         message.warn('请输入搜索内容后再点击搜索按钮')
         return false
     }
    //这里是触发查询的接口
     this.props.matchHistory.getHistoryList(val)
}
//判断点击的键盘的keyCode是否为13，是就调用上面的搜索函数
handleEnterKey = (e) => {
    if(e.nativeEvent.keyCode === 13){ //e.nativeEvent获取原生的事件对像
         this.onSearchText()
    }
}

第二种：通过addEventListener注册事件

注意：在react中要慎用addEventListener

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

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

下面是使用注册事件方法

constructor(props){
  this.myRef = React.createRef()
}
componentDidMount(){ 
    //组件挂载时候，注册keypress事件
    document.addEventListener('keypress',this.handleEnterKey)
}
componentWillUmount(){
   //组件卸载时候，注销keypress事件
   document.removeEventListener("keypress",this.handleEenterKey)
}
//搜索触发接口
onSearchText(){
   //当一个 ref 属性被传递给一个 render 函数中的元素时，
  // 可以使用 ref 中的 current 属性对节点的引用进行访问。
    let val = this.myRef.current.input.value
    if(!val.trim()){
         message.warn('请输入搜索内容后再点击搜索按钮')
         return false
     }
    //这里是触发查询的接口
     this.props.matchHistory.getHistoryList(val)
}
//判断点击的键盘的keyCode是否为13，是就调用上面的搜索函数
handleEnterKey = (e) => {
    if(e.keyCode === 13){ //主要区别就是这里，可以直接获取到keyCode的值
         this.onSearchText()
    }
}

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

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

合成事件对象