обратный вызов form.submit не вызывается - PullRequest
Новая
       25

обратный вызов form.submit не вызывается

1 голос
/ 07 июля 2019

Я использую модульact-bootstrap-typeahead в одном из моих приложений.Это работает нормально, за исключением одного случая.

Я не могу отправить форму, нажав клавишу ВВОД, если нет результатов.

т.е.если есть какие-то предложения , предоставленные response-bootstrap-typeahead, я могу выбрать один из вариантов и отправить форму.В этом случае, может вызвать обратный вызов onSubmit.

, если есть нет предложений , предоставленных response-bootstrap-typeahead, не сможет отправить форму.

ЕслиЯ отправляю форму, используя метод form.submit () для события onKeyDown, форма будет отправлена, однако страница обновляется вместо вызова обратного вызова, что приводит к полному выходу из моего контрольного результата.

Желаемый результат: Я должен иметь возможность вызывать обратный вызов onSubmit, даже если нет предложений, предложенных response-bootstrap-typeahead.

Вот мой код. 

<form ref={(form) => this.form = form} onSubmit={this.sendMessage}>
  <Typeahead
    id="rbt-example"
    dropup={true}
    ref={(typeahead) => this.typeahead = typeahead}
    onChange={this.valueChanged}
    onInputChange={this.updateQuery}
    onBlur={(e) => this.updateQuery(e.target.value, e)}
    onKeyDown={(e) => {
      // Submit the form when the user hits enter.
      if (e.keyCode === 13) {
        this.form.submit();
      }
    }}
    options={options}
    placeholder="Type your queries here..."
    renderMenu={(results, menuProps) => {
      // Hide the menu when there are no results.
      if (!results.length) {
        return null;
      }
      return <TypeaheadMenu {...menuProps} options={results} />;
    }}
  />
  <button type="submit">Submit</button>
</form>

Ответы [ 2 ]

2 голосов
/ 07 июля 2019

Проблема, вероятно, вызывает this.form.submit(), который обрабатывает отправку формы в DOM (вместо React) и, как вы говорите, выводит ее из-под контроля.Это обновляет страницу, потому что вы не можете контролировать событие, чтобы вызвать event.preventDefault().

Вместо this.form.submit, вы должны позвонить this.sendMessage, когда пользователь нажимает ввод.Предположительно, вы звоните event.preventDefault в sendMessage, поэтому вы должны передать событие с onKeyDown: 

onKeyDown={e => {
  if (e.keyCode === 13) {
    this.sendMessage(e);
  }
}}

Таким образом, вы будете обрабатывать отправку формы одинаково, будь то в ответ напользователь нажимает кнопку отправки или ввод.

0 голосов
/ 10 июля 2019

Если вы заметили код в моем вопросе, я обрабатываю несколько событий. Особенно onChange и onKeyDown.

Пара вещей, которые мы должны понять о react-bootstrap-typeahead,

  1. onChange, response-bootstrap-typeahead передаст выбранный объект обратному вызову, тогда как onKeyDown реагировать-bootstrap-typeahead пропустит событие, из которого я получу значение, используя event.target.value
  2. onChange будет срабатывать только после onKeyDown. следовательно, если мы хотим выполнить какую-либо операцию на основе выбранного объекта и это значение, которое будет использоваться в onKeyDown, обратный вызов не будет работать.

Чтобы преодолеть эту ситуацию, я использовал setTimeout и убрал элемент формы. поэтому мое решение просто становится 

<Typeahead
    id="rbt-example"
    dropup={true}
    ref={(typeahead) => this.typeahead = typeahead}
    onChange={this.valueChanged}
    onInputChange={this.updateQuery}
    onBlur={(e) => this.updateQuery(e.target.value, e)}
    onKeyDown={(e) => {
      // Submit the form when the user hits enter.
      if (e.keyCode === 13) {
          if (this.timerid) {
            clearTimeout(this.timerid);
          }
          this.timerid = setTimeout(
            () => {
              this.sendMessage();
            },
            300
          );
      }
    }}
    options={options}
    placeholder="Type your queries here..."
    renderMenu={(results, menuProps) => {
      // Hide the menu when there are no results.
      if (!results.length) {
        return null;
      }
      return <TypeaheadMenu {...menuProps} options={results} />;
    }}
  />
  <button onClick={() => this.sendMessage() }>Send</button>

Таким образом, я вызываю sendMessage метод onKeyDown и нажимаю кнопку. Я также могу использовать выбранный объект опции.

...