多个反应表单输入禁用 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 会提交它（这是一些 HTML 规范）。不过，最好手动处理表单提交。

所以如果你添加这个：

<button type='submit' />

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

Answer 2

您可以使用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

Answer 3

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

<input type="submit">