Question

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

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

ie; 如果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.form.submit而不是this.sendMessage。大概您是在event.preventDefault中呼叫sendMessage，因此您应该通过onKeyDown传递事件：

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

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

Answer 2

如果您注意到我的问题中的代码，则表示我正在处理多个事件。尤其是onChange和onKeyDown。

关于react-bootstrap-typeahead，我们需要了解的事物是

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

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

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

form.submit回调未被调用

2 个答案: