Why can't I capture the form Submit event in a create-react-app program?-CodePudding

Here is a demo of my problem. This is a new app created from running CRA and only changing the App.js code to this:

import './App.css';
function App() {
  function getSubmit() {
    alert('submit!')
    return false
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onsubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;

It compiles and runs but the function "getSubmit" is not called. Running in debug mode, a breakpoint set there is not hit. The window tab flashes when I click Submit, but I can't read what's on it.

The package.json is shown below if that is any help. What's wrong?

{
  "name": "formsubmit",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

CodePudding user response：

This works because when you submit a form it reloads by default, so prevent default as below:

function getSubmit(event) {
  event.preventDefault();
  alert('submit!')
  return false
}

CodePudding user response：

You are missing a closing '>' on one of your p tags but assuming that was just a copy error, I think your real problem is:

<form onsubmit={getSubmit}>

onsubmit doesn't mean anything to javascript, you need onSubmit

Also, you might want to pass in an event to your submit handler and prevent the default submit behavior of refreshing the page so you can see what's going on in your debugger.

  function getSubmit(event) {
    event.preventDefault()
    alert('submit!')
    return false
  }

CodePudding user response：

You actually have to prevent the default behavior of the submit event, and it has to be onSubmit, not onsubmit. Try with this :

import './App.css';
function App() {
  function getSubmit(e) {
    e.preventDefault();
    alert('submit!');
    return false;
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onSubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;