多个反应形式输入禁用onSubmit

Question

我有一个非常简单的例子,按预期工作:https: //jsfiddle.net/x1suxu9h/

var Hello = React.createClass({
  getInitialState: function() {
    return { msg: '' }
  },
  onSubmit: function(e) {
    e.preventDefault();
    this.setState({ msg: 'submitted' })
  },
  render: function() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" />
        <div>{this.state.msg}</div>
      </form>
    )
  }
});

但是,当添加另一个表单字段时,按下回车键时不再触发onSubmit:https://jsfiddle.net/nyvt6506/

var Hello = React.createClass({
  getInitialState: function() {
    return { msg: '' }
  },
  onSubmit: function(e) {
    e.preventDefault();
    this.setState({ msg: 'submitted' })
  },
  render: function() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" />
        <input type="text" />
        <div>{this.state.msg}</div>
      </form>
    )
  }
});

我错过了明显的吗？

Answer 1

通常只是在聚焦表单元素时按Enter键不会提交它,你会使用某些内容来专门提交它(比如提交按钮或事件处理程序,在按下回车时提交它)

但是,默认情况下,如果整个表单中只有一个文本输入,则按Enter键提交它(它是一些HTML规范).但是,手动处理表单提交是很好的.

所以如果你添加这个:

<button type='submit' />

对于您的表单,无论是一个还是两个还是50个文本输入,它仍将提交