javascript - form.submit 回调未被调用

Question

我在我的一个应用程序中使用了 react-bootstrap-typeahead 模块。这工作正常，但在一种情况下除外。

如果没有结果，我无法通过按 ENTER 键提交表单。

即；如果 react-bootstrap-typeahead 提供了建议，我可以选择其中一个选项并提交表单。在这种情况下，能够调用回调 onSubmit。

如果 react-bootstrap-typeahead 没有提供建议，则无法提交表单。

如果我使用 form.submit() 方法的 onKeyDown 事件提交表单，表单将被提交，但是，页面被刷新而不是调用回调，这导致完全超出我的控制结果。

期望的结果:如果 react-bootstrap-typeahead 提供了建议，即使没有提供任何建议，我也应该能够调用 onSubmit 回调。

这是我的代码。

<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>

Answer 1

问题很可能是调用 this.form.submit()，它处理 DOM 中的表单提交(而不是 React)，正如您所说，将其置于您的控制之外。它正在刷新页面，因为您无法控制调用 event.preventDefault() 的事件。

您应该在用户按下回车键时调用 this.sendMessage 而不是 this.form.submit。假设您正在 sendMessage 中调用 event.preventDefault，因此您应该从 onKeyDown 传递事件:

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

这样，无论是响应用户按下提交按钮还是回车，您都将以相同的方式处理表单提交。