ionic 5 - 仅当用户按下输入/确认搜索时，如何使用离子搜索栏在服务器上搜索答案

【问题标题】：ionic 5 - How to use ionic search bar to search on server only when user presses enter / confirms the searchionic 5 - 仅当用户按下输入/确认搜索时，如何使用离子搜索栏在服务器上搜索
【发布时间】：2020-12-30 15:54:15
【问题描述】：

我正在使用 ionic 5 构建一个应用程序，我希望有一个搜索栏来搜索和显示来自服务器的结果。

查看文档 (https://ionicframework.com/docs/api/searchbar) 时，似乎该元素在设计时考虑了本地过滤。

事件 ionInput 的行为与 ionChange 非常相似，并在输入更改时触发。

我想在服务器上搜索并仅在用户确认搜索（即按回车键）时显示结果。

我找不到怎么做。

最好的问候，吉尔赫姆。

【问题讨论】：

标签： ionic-framework ionic5 ionic-react

【解决方案1】：

我找到了一个解决方案，将搜索栏元素包装在一个表单元素中，并对表单的 onSubmit 事件做出反应：

export default class MyComponent extends React.Component<{}> {
    handleSubmit(e: FormEvent) {
        e.preventDefault();
        console.log("submitted")
    }

    render() {
          return (
          <form onSubmit={e => this.handleSubmit(e)}>
               <IonSearchbar/>
          </form>
        );
    }
}

【讨论】：