trato de hacer un formulario en reaccionar js y no quiero actualizar la página cuando envío mi formulario.
Hago una devolución de llamada en mi servidor (frasco).
Cuando trato de hacer: "event.preventDefault();" mi llamada a mi servidor de matraz no funciona.
ahí está mi código:
import { useState } from 'react'; const Form = (props) => { const componentDidMount = (event) => { event.preventDefault(); // Simple POST request with a JSON body using fetch const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: title }) }; fetch('http://localhost:5000/add', requestOptions) .then(response => response.json()) .catch(error => console.log(error)) } const [title, setTitle] = useState('') const [body, setBody] = useState('') return ( <div> <form onSubmit = {() => componentDidMount()} > <label htmlFor="title" className="form-label">Title</label> <input type="text" className="form-control" placeholder ="Enter title" value={title} onChange={(e)=>setTitle(e.target.value)} required /> <label htmlFor="body" className="form-label">Body</label> <textarea className="form-control" placeholder ="Enter body" value={body} onChange={(e)=>setBody(e.target.value)} required > </textarea> <button className="btn btn-primary mt-2" > Publish article</button> </form> </div> )} export default Form;No quiero actualizar la página porque una de cada dos es mi función de devolución de llamada y quiero trabajar en ella, pero no puedo leer el error en la consola.
¡Gracias por tu ayuda!
también necesita pasar el evento para activar la función event.preventDefault()
<form onSubmit = {(event) => componentDidMount(event)} >Es porque está llamando a la función componentDidMount en la etiqueta de form .
Solo tienes que pasar la reference de la función en el atributo onSubmit .
<form onSubmit={componentDidMount}> ... </form>No recomendaría usar un método de ciclo de vida de componentes (como componenteDidMount) para manejar un evento de envío de formulario. Simplemente podría crear un controlador específico:
const Form = (props) => { const handleSubmit = (event) => { event.preventDefault(); // ... } // ... return ( <div> <form onSubmit={handleSubmit} > {/* // ... */} </form> </div> ) }