React onSubmit event not working

Viewed 2399

When I hit enter on the form, it does not trigger the onSubmit event. There are no errors. The other event, onBlur, does dispatch. The logForm function will eventually console.log a JSON string of all the form's fields, but I have not yet gotten that far. I am simply trying to trigger the onSubmit event on the form. Any help or explanation would be appreciated. Here's the code:

import React from 'react'

export default function SignupForm() {
  return (
    <form onSubmit={logForm}>
      <div className="form-group">
        <label>
          Name:
          <input onBlur={logUpdate} className="form-control" 
          type="text" placeholder="Username"/>
        </label>
      </div>
      <div className="form-group">
        <label>
          Email:
          <input onBlur={logUpdate} className="form-control" 
          type="text" placeholder="johndoe@example.com"/>
        </label>
      </div>
      <div className="form-group">
        <label>
          Password:
          <input onBlur={logUpdate} className="form-control" 
          type="password" placeholder="Password"/>
        </label>
      </div>
      <div className="form-group">
        <label>
          Confirm Password:
          <input onBlur={logUpdate} className="form-control" 
          type="password" placeholder="Password"/>
        </label>
      </div>
    </form>
  )
}

function logForm(e) {
  e.preventDefault()
  const formInfo = new FormData(e.target)
  console.log(formInfo)
}

function logUpdate(e) {
  console.log(e.target.value)
}
1 Answers
Related