在项目中经常会遇到查询的功能,一般会要求有两种实现方式:一是在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代码如下
<Input ref={this.myRef} onKeyPress={this.handleEnterKey}/>
<Button onClick={this.onSearchText.bind(this)}> 查询</Button>
第一种:通过 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了。
合成事件对象
网友评论