Estoy tratando de crear simplemente una ventana desplazada/modal/ventana emergente que al hacer clic se abre y al hacer clic en el botón Cerrar se cierra. Hasta ahora logré que el botón de abrir funcione, por lo que el modal se abre como se esperaba. Cuando la ventana de compensación está abierta, el botón de cerrar no funciona.
¿Qué me estoy perdiendo? lo siento, soy nuevo en reaccionar, así que me alegra saber si mi código necesita ajustes o mejoras. Como creo que podría ser realmente positivo para mí.
Por favor, vea el código con todos los componentes. Demostración aquí: https://codesandbox.io/s/sleepy-haslett-metr46
class CTAClose extends Component { render () { return ( <div className="contact__close-register"> <button type="button" className={`cta__close-register ${this.props.active}`} onClick={this.props.onClick} > <AiOutlineClose/> </button> </div> ) } } export default CTACloseEl estado active se mantiene en el componente Intro . Entonces, al presionar el botón Cerrar, debe activar correctamente el controlador onClose pasado. Lo que hizo fue tener un estado active separado dentro del Componente de Contact . Al cambiar ese estado, no sucede nada, ya que el estado abierto modal depende del componente active de Intro .
Echa un vistazo al violín de trabajo:
Llame correctamente a onClose en Contact.jsx al presionar el botón Cerrar (Contact.jsx línea 10)
<CTAClose onClick={this.props.onClose} /> Establezca el modal como cerrado en Intro.jsx cuando se llame a onClose() (Intro.jsx línea 30)
<Contact active={this.state.active} onClose={() => this.setState({ active: "" })} />