ионный 5 — Как использовать ионную панель поиска для поиска на сервере, только когда пользователь нажимает enter / подтверждает поиск

#ionic-framework #ionic5 #ionic-react

#ionic-framework #ionic5 #ionic-реагировать

Вопрос:

Я использую ionic 5 для создания приложения, и я хотел бы иметь панель поиска для поиска и отображения результатов с сервера.

При просмотре документации (https://ionicframework.com/docs/api/searchbar ), похоже, что этот элемент разработан с учетом локальной фильтрации.

Событие ionInput ведет себя очень похоже на ionChange и срабатывает при изменении ввода.

Я хотел бы выполнить поиск на сервере и представить результаты только тогда, когда пользователь подтвердит поиск (т. Е. Нажав enter).

Я не смог найти, как это сделать.

С наилучшими пожеланиями, Гильерме.

Ответ №1:

Я нашел решение для этого, обернув элемент панели поиска в элемент формы и отреагировав на событие отправки формы:

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