How can I submit my form when the user presses Enter?

The default browser behavior for text and password inputs when ↵ is pressed is to activate the first <button> that does not have type="button" specified. The recommended way to structure your form is as follows:


render() {
  const {fields: {firstName, lastName}, handleSubmit} = this.props.fields;
  return (
    <form onSubmit={handleSubmit}>
      <button type="button">Load Data</button>
      <button type="button">Delete Record</button>

      <label htmlFor="firstName">First Name</label>
      <input type="text" {...firstName}/>

      <label htmlFor="lastName">Last Name</label>
      <input type="text" {...lastName}/>

      <button type="submit">Submit</button>
      <button type="button">Do Something Else</button>
    </form>
  );
}

Things to notice:

  1. handleSubmit is on the <form> element, not on the <button>. It does not hurt to put it on the onClick for the button, but it doesn't accomplish anything.
  2. The submit button is explicitly marked type="submit".
  3. You may place any other buttons inside the form as long as they are labeled type="button".