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()的事件。

当用户按下Enter this.sendMessage时，应该调用this.sendMessage而不是this.form.submit 。 大概是在sendMessage调用event.preventDefault ，因此您应该通过onKeyDown传递事件：

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

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

Answer 2

如果您注意到我的问题中的代码，那么我正在处理多个事件。 特别是onChange和onKeyDown 。

我们需要了解有关react-bootstrap-typeahead件事

1. onChange ，react-bootstrap-typeahead会将选定的对象传递给回调，而onKeyDown react-bootstrap-typeahead会将事件传递，从中，我将使用event.target.value获取值
2. 仅在onKeyDown之后才会触发onChange 。 因此，如果我们要基于所选对象执行某些操作，并且onKeyDown回调中使用的值将无法工作。

为了克服这种情况，我使用setTimeout还删除了form元素。 所以我的解决方案就变成了

<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并单击按钮。 我还可以利用所选的选项对象。