我有一个按预期工作的非常简单的例子:
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>
    )
  }
});

我在这里错过了明显的东西吗?

最佳答案

通常只是在聚焦表单元素时按 Enter 键不会提交它,您会使用一些东西来专门提交它(例如提交按钮或事件处理程序在按下 Enter 键时提交它)

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

所以如果你添加这个:

<button type='submit' />

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

关于javascript - 多个 react 表单输入禁用 onSubmit,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40400633/

10-12 12:57
查看更多