javascript - Multiple react form inputs disables the onSubmit - Stack Overflow

admin管理员组

文章数量:1279243

I have this very simple example that works as expected: /

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

However, when adding another form field, the onSubmit is not triggered anymore when pressing the enter key: /

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

Am I missing the obvious here?

I have this very simple example that works as expected: https://jsfiddle/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>
    )
  }
});

However, when adding another form field, the onSubmit is not triggered anymore when pressing the enter key: https://jsfiddle/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>
    )
  }
});

Am I missing the obvious here?

• javascript
• forms
• reactjs

Share Improve this question Follow asked Nov 3, 2016 at 11:43 David HellsingDavid Hellsing 109k4444 gold badges180180 silver badges214214 bronze badges 3

• Possible duplicate of Submitting a form by pressing enter without a submit button – Fabian Schultz Commented Nov 3, 2016 at 11:55
• just add submit button into your form – Beginner Commented Nov 3, 2016 at 11:56
• It's not a React based problem. w3/TR/html5/forms.html#implicit-submission / stackoverflow./questions/477691/… / stackoverflow./questions/925334/… – thirtydot Commented Nov 3, 2016 at 11:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

Normally just pressing enter while focusing a form element doesn't submit it, you would use something to specifically submit it (like a submit button or an event handler to submit it upon pressing enter)

However, by default, if there's only ONE text input in the whole form then pressing enter submits it (it's some HTML specification). However, it's good to manually handle form submission.

So if you add this:

<button type='submit' />

to your form, whether there's one or two or 50 text inputs it will still submit

Including an input of type "submit" will suffice for the form submission

<input type="submit">

You can use onKeyPress instead of onSubmit as a workaround, something like this

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

本文标签： javascriptMultiple react form inputs disables the onSubmitStack Overflow