Aquí hay una demostración de mi problema. Esta es una nueva aplicación creada a partir de la ejecución de CRA y solo cambiando el código App.js a esto:
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;Compila y se ejecuta, pero no se llama a la función "getSubmit". Al ejecutarse en modo de depuración, no se alcanza un punto de interrupción establecido allí. La pestaña de la ventana parpadea cuando hago clic en Enviar, pero no puedo leer lo que contiene.
Este es el paquete.json si fuera útil:
{ "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" ] } }En realidad, debe evitar el comportamiento predeterminado del evento de envío, y debe ser onSubmit , no onsubmit . Prueba con esto:
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;Esto funciona porque cuando envía un formulario, se vuelve a cargar de forma predeterminada, así que evite el valor predeterminado de la siguiente manera:
function getSubmit(event) { event.preventDefault(); alert('submit!') return false }Le falta un '>' de cierre en una de sus etiquetas p, pero suponiendo que solo fue un error de copia, creo que su verdadero problema es:
<form onsubmit={getSubmit}> onsubmit no significa nada para javascript, necesita onSubmit
Además, es posible que desee pasar un evento a su controlador de envío y evitar el comportamiento de envío predeterminado de actualizar la página para que pueda ver lo que sucede en su depurador.
function getSubmit(event) { event.preventDefault() alert('submit!') return false }