Как отправить поля поиска после ввода нажмите - PullRequest
Новая
       64

Как отправить поля поиска после ввода нажмите

1 голос
/ 24 февраля 2020

Я пишу свое заявление в React.tsx. Я открываю окно моего меню, которое содержит много элементов div со многими полями ввода, флажками и элементами выбора. У меня также есть кнопка «Отправить», и когда я нажимаю на нее, появляется список результатов с пользовательскими фильтрами: проверяет / вводит / выбирает. Я хотел бы отображать результаты также после нажатия клавиши ввода. Я добавляю этот метод: 

private enterPressed(event: any) {
  const code = event?.keyCode || event?.which;
  if (code === 13) {
    this.onClickSearch();
  }
}

, и я также использую onKeyPress={this.enterPressed.bind(this)} to my inputs and selected elements.

У меня следующая проблема. Когда я открываю окно и нажимаю ввод, ничего не происходит. Когда я сфокусировался на каком-либо вводе и затем нажал Enter, это сработало. Решение этой проблемы - установить автофокус на любое поле ввода, но я не хочу делать это таким образом. Знаете ли вы какое-либо другое решение, может быть, с помощью прослушивателя событий или чего-то, что позволяет мне нажимать ввод и отображать результаты также без какого-либо пользовательского фильтра и без сохранения активности в каком-либо поле .?

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 24 февраля 2020

По умолчанию, когда вы упаковываете элементы ввода в <form>, вы можете отправить, нажав клавишу ввода, когда сфокусированы на поле, которое предназначено для работы формы.

Но так как вы упомянули, что Вы не можете sh для этого поведения, вы можете прикрепить прослушиватель событий к объекту окна, который будет прослушивать нажатия клавиш.

Этот прослушиватель событий необходимо создавать только при монтировании меню. Слушатель должен быть удален при закрытии меню. 

class Menu extends Component {
  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      // enter pressed
    }
  }
  componentDidMount(){
    window.addEventListener("keydown", this.handleKeyDown);
  }
  componentWillUnmount(){
    window.removeEventListener("keydown", this.handleKeyDown);
  }
  //...
}
...