IonSearchbar如何检测设备回车键以触发搜索功能？

解决方案 #

你需要使用IonSearchbar内置的onIonSearch事件，该事件专门响应两种触发场景：

• 用户点击搜索栏右侧的搜索图标按钮
• 用户按下设备（移动端/桌面端）的回车键
  这个事件是Ionic封装好的跨端兼容事件，不需要自行处理键盘事件的适配逻辑。

修改后参考代码 #

const Search = () =>{
  //do something
}   
const Words = (value:any) =>{
  //do something
}   
return(
  <>
    <IonSearchbar 
      debounce={500} 
      type="search" 
      onIonChange={e => {Words(e.detail.value!)}} 
      onIonSearch={Search} 
    ></IonSearchbar>
  </>
)
};

备选方案：自行监听键盘事件 #

如果有自定义场景需要更灵活的控制，也可以通过onKeyDown事件判断按键类型实现：

const handleKeyDown = (e: any) => {
  if(e.key === 'Enter') {
    Search()
  }
}

// 组件绑定处增加onKeyDown
<IonSearchbar 
  debounce={500} 
  type="search" 
  onIonChange={e => {Words(e.detail.value!)}} 
  onKeyDown={handleKeyDown}
></IonSearchbar>

内容的提问来源于stack exchange，提问作者JAOdev