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

Question

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

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

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

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

我找不到如何做到这一点。

最好的问候，吉尔赫姆。

Answer 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>
        );
    }
}