0

Estoy haciendo un formulario con React y necesito que NO se recargué la página al enviarlo. Este es mi código:

  const [stateMessage, setMessage] = useState(false)
  async function handleSubmit (event) {
    event.preventDefault()
    const form = new FormData(this)
    const response = await fetch('https://formspree.io/f/mwkyrwoe', {
      method: 'POST',
      body: form,
      headers: {
        Accept: 'application/json'
      }
    })
    if (response.ok) {
      setMessage(true)
    }
  }
return (
 <React.Fragment>
  <form
    action='https://formspree.io/f/mwkyrwoe'
    method='POST'
    className='formulario'
    onSubmit={() => handleSubmit}
  ></form>
 </React.Fragment>
)

Al hacer click en el botón enviar me redirigé a la página de Fromspree, pero no quiero que pase eso.

¿Alguna idea de cómo puedo hacer esto?

Desde ya muchas gracias :)

3
  • <form onSubmit={this.handleSubmit}> ? Commented el 22 may. 2022 a las 18:05
  • No la ejecutes en el jsx, solo pon onSubmit={handleSubmit} Commented el 22 may. 2022 a las 19:11
  • @aloMalbarez no está utilizando React con clases por lo que en este contexto no se utiliza el this Commented el 23 may. 2022 a las 10:42

2 respuestas 2

1

Para solucionar este problema puedes optar por dos opciones:

  1. Utilizar únicamente el callback de la función handleSubmit en el propio evento del formulario como se ha indicado en uno de los comentarios a la pregunta tal que:

  const [stateMessage, setMessage] = useState(false)
  async function handleSubmit (event) {
    event.preventDefault()
    const form = new FormData(this)
    const response = await fetch('https://formspree.io/f/mwkyrwoe', {
      method: 'POST',
      body: form,
      headers: {
        Accept: 'application/json'
      }
    })
    if (response.ok) {
      setMessage(true)
    }
  }
return (
 <React.Fragment>
  <form
    action='https://formspree.io/f/mwkyrwoe'
    method='POST'
    className='formulario'
    onSubmit={ handleSubmit }
  ></form>
 </React.Fragment>
)

  1. Utilizar la función ejecutada tal y como la tienes ahora mismo en el ejemplo que muestras pero pasándole el evento como parámetro tal que:

  const [stateMessage, setMessage] = useState(false)
  async function handleSubmit (event) {
    event.preventDefault()
    const form = new FormData(this)
    const response = await fetch('https://formspree.io/f/mwkyrwoe', {
      method: 'POST',
      body: form,
      headers: {
        Accept: 'application/json'
      }
    })
    if (response.ok) {
      setMessage(true)
    }
  }
return (
 <React.Fragment>
  <form
    action='https://formspree.io/f/mwkyrwoe'
    method='POST'
    className='formulario'
    onSubmit={ ev => handleSubmit(ev) }
  ></form>
 </React.Fragment>
)

0

recomendación añadir en el documento principal esto, de esta manera todos los formularios no tendran ese efecto de recarga inecesaria: document.addEventListener('submit', (e)=>{e.preventDefault();})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.