Tengo este problema extraño cuando presiono el botón, el envío actualiza la página y se adjunta a los parámetros de URL de los navegadores. Parece que no se llama a preventDefault() .
La función que activa onSubmit es esta:
const handleLogin = (e: FormEvent<HTMLFormElement>) => { console.log("triggered?") e.preventDefault() ...some api calls } Al principio, cuando presiono el botón ( input[submit] ) parece que esta función no se llama en absoluto a medida que se actualiza. Pero después de esta primera llamada, adjunta a la URL los campos de entrada del formulario y sus valores (lo cual es bastante malo porque expone la contraseña f.ex a la URL).
el jsx de form se ve así:
<form onSubmit={handleLogin}> ...input elements ... <div className={'form-group'}> <input className="form-control" value={"Login"} name="login" type="submit"/> </div> </form>EDITAR:
Así que me di cuenta de que este problema ocurre debido a react-router (v6);
<Routes> <Route path="/" element={<Navigate to="ui"} /> <Route path="ui"> <Route index element={getRedirect()}/> <Route path="login" element={<AuthPage/>}/> </Route> </Routes> Porque en el momento en que se carga la página, el enrutador reacciona hace una "redirección" a /ui/ - localhost:port/ui/
Y es por eso que al hacer clic primero en e.preventDefault() o e.stopPagination() no funciona. Pero si actualizo o voy directamente a localhost:port/ui/ en lugar de solo localhost:port . El formulario funcionará como debería. Honestamente, no pude encontrar una buena solución para esto: \
Actualmente agregué algo como esto para dev env (en prod BE debería redirigir a /ui/ ).
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') { if (!window.location.href.includes("/ui/")) { window.location.href = window.location.href + "ui/" }Pero esto me parece muy raro.
Creo que estás cometiendo algún error aquí está el ejemplo totalmente funcional que funciona perfectamente bien.
const App = () => { const [value, setValue] = useState(""); const handleChange = (event) => { console.log(event.target.value); setValue(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); console.log(value); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={value} onChange={handleChange} /> </label> <input type="submit" value="Login" name="login" /> </form> ); }; export default App;