Estoy tratando de hacer lo que pensé que sería una tarea simple. Al enviar el formulario que extrae el componente GravityForm, configuro el estado handleSubmit en verdadero, lo que luego muestra el mensaje de agradecimiento (todo esto funciona bien, eliminé las URL, pero puedo asegurarles que esta parte está bien) .
Mi problema surge cuando cargo el mensaje de éxito. La función setTimeout muestra el id. ¿Hay alguna forma en que pueda evitar que muestre esa identificación o implementar esta función de una manera diferente que signifique que no se mostrará?
La funcionalidad esperada es que el mensaje de agradecimiento se muestre durante 3 segundos y luego la página se cargará en un sitio diferente.
import "./form.css"; import React, { Component } from "react"; import GravityForm from "react-gravity-form"; import styled from "styled-components"; export class Gravity extends Component { state = { handleSubmit : false, } successMessage = styled.div` display: block; color: #fff; font-size: 24px; text-align: center; `; render() { const { handleSubmit } = this.state; if (!handleSubmit) { return ( <GravityForm backendUrl="https://removedurlforclientprivacy.com/wp-json/glamrock/v1/gf/forms" formID="3" onSubmitSuccess={ () => { this.setState({ handleSubmit : true, }) } } /> ); } else { return ( <> <this.successMessage> <p>Thanks for entering our competition!<br />If you're our lucky winner, we will let you know.</p> </this.successMessage> { setTimeout(() => window.location.href = 'https://google.co.uk', 3000) } </> ) } } } export default Gravity¿Puede intentarlo de esta manera? Cree una función en la que pueda configurar sus cosas de éxito y llamarla en su otra condición.
renderSuccesssMessage = () => { setTimeout(() => window.location.href = 'https://google.co.uk', 3000) return ( <this.successMessage> <p>Thanks for entering our competition!<br />If you're our lucky winner, we will let you know.</p> </this.successMessage> ) }Y simplemente llame a esta función en su otra condición
else { return ( this.renderSuccessMessage() ) }La razón por la que está viendo la identificación es porque la función setTimeout devuelve la identificación. Imagine que la llamada setTimeout() simplemente se reemplaza con 123, de modo que se vería como { 123 }, por supuesto, mostrará el valor 123.
Una forma de suprimir el valor es convertirlo en una expresión para ser evaluada, algo así como { 123 && <></> }, de esa manera se devolverá el elemento vacío en lugar del valor en sí (obviamente reemplazando el 123 con su función setTimeout() de la siguiente manera:
{ setTimeout(() => window.location.href = 'https://google.co.uk', 3000) && <></> }También puede jugar con { 123 && undefined } o { 123 && null }, lo que probablemente daría como resultado que ni siquiera devuelva un elemento, nuevamente asegurándose de reemplazar 123 con su función setTimeout().
Puede cambiar su función onSubmitSuccess como se muestra a continuación y eliminar setTimeout del bloque else:
onSubmitSuccess={() => { this.setState({ handleSubmit : true, },() => { setTimeout(() => window.location.href = 'https://google.co.uk', 3000) }); }}