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>
    )
  }
});

但是，在添加其他表单字段时，按Enter键时不再触发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个文本输入，它仍然会提交

Answer 2

包含“提交”类型的输入就足以提交表单

<input type="submit">

Answer 3

您可以使用onKeyPress代替onSubmit作为解决方法，类似这样的

var Hello = React.createClass({
  getInitialState: function() {
    return { msg: '' }
  },
  onSubmit: function(e) {
    e.preventDefault();
    console.log(e.currentTarget); // <-- Form
    this.setState({ msg: 'submitted' })
  },
  onKeyPress: function(e) {
    if(e.key === 'Enter')
        this.onSubmit(e);
  },
  render: function() {
    return (
        <form onKeyPress={this.onKeyPress}>
        <input type="text" />
        <input type="text" />
        <div>{this.state.msg}</div>
      </form>
    )
  }
});

jsfiddle

多个反应形式输入禁用onSubmit

3 个答案: