Блог

Главная - Вопросы по программированию - Как мне запустить мою функцию onSubmit при нажатии клавиши enter?

Как мне запустить мою функцию onSubmit при нажатии клавиши enter?

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть компонент, который должен отправляться, когда пользователь нажимает enter или нажимает кнопку. Важно то, что пользователь будет ожидать, что сможет использовать Enter для отправки этой формы, а кнопка отправки действительно предназначена только тогда, когда они заметят, что она есть, и решат нажать кнопку.

Моя проблема в том, что у меня есть настройка формы и все такое, и мой обработчик отправки работает должным образом, но, похоже, я вообще не могу захватить клавишу ввода для этого!

сначала у меня есть функция отправки следующим образом:

   onSubmit(e) {
    e.preventDefault();
    this.state.socket.emit('message', this.state.message);
    console.log('emitted');
    this.setState(
      {
        message: '',
      },
      () => {
        // e.target.value = '';
        console.log('state should be cleared.');
      },
    );
  }

и моя форма выглядит так:

 <Form>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton" onClick={this.onSubmit}>
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

Я пытался сделать это с помощью решения, найденного здесь: react-redux формирует проблему с github.

но безрезультатно, я все равно получаю обновленную страницу…..

Комментарии:

1. Вам нужно будет добавить обработчик keydown событий для document проверяемого event.which(13) .

2. почему onSubmit находится на кнопке? Используйте обработчик отправки в форме

3. @epascarello просто мой обычный. Не все, что «должно быть»

4. Хороший момент. Возможно, я до сих пор неправильно понимал событие отправки

5. обычно пользователи будут вводить ввод правильно, поэтому слушайте onKeyUp , evt.which чтобы получить код ключа

Ответ №1:

Слушайте onSubmit в форме, а не onclick на кнопке. По умолчанию кнопки имеют тип «отправить», поэтому нажатие на нее или нажатие «Ввод» внутри текстового поля отправит вашу форму.

 <Form onSubmit={this.onSubmit}>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton">
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

Ответ №2:

Реорганизуйте это:

 <Form>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton" onClick={this.onSubmit}>
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

в это:

Отправить

Итак, откуда я handleSubmit взялся? Ну, если вы сделаете console.log(this.props); здесь:

 render() {
  console.log(this.props);
  return (
    <Form onSubmit={this.props.handleSubmit(this.onSubmit)}>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <button className="chatBoxButton">Send</button>
     </div>
  </FormGroup>
</Form>
  )
}

Вы обнаружите, что внутри этого props объекта с помощью Redux Form существует огромное количество свойств, в частности, вызывается handleSubmit одно, которое является функцией, которую мы должны вызывать в любое время, когда ваша форма отправляется и предоставляется Redux Form.

Хорошо, но почему не просто onSubmit={this.onSubmit} ? Короткий ответ заключается в том, что теперь вы используете Redux Form.

Этот новый процесс вызова onSubmit={this.props.handleSubmit(this.onSubmit)} изменит способ onSubmit вызова.

Поэтому вместо:

 onSubmit(event) {
  event.preventDefault();
}

Теперь вы можете сделать:

 onSubmit(formValues) {

}

Вы видите, что вам больше не нужно иметь дело с event объектом, вместо этого он будет вызываться со всеми значениями из вашей формы. Таким handleSubmit образом, обрабатывается event.preventDefault() за кулисами, оставляя наш onSubmit() обратный вызов вызываться с formValues помощью .

Метки: