const [open, setIsOpen] = useState(false);
const openForm = () => setIsOpen(true);
<button class="openButton" onClick={() => {openForm}} style={openButton}>Chat</button>
<div class="chatPopup" id="myForm" style={chatPopup}>
<Form open={open}/>
<div class="formContainer" style={formContainer}>
<span class="title1" style={title1}>Chat</span>
<label for="msg"><b>Message</b></label>
<iframe customFrameSection style={customFrameSection} frameborder="1" id="AIChat" style={{border:'1px solid rgba(0,255,0,0.3)',width: "285px",height: "400px"}}></iframe>
<button type="button" class="btn cancel" onclick={closeForm} style={cancelButton}>Close</button>
</div>
</div>
Lo he intentado de varias maneras, al hacer clic debería abrir la ventana de chat, cómo se abrirá la ventana emergente de chat con el ID de myform, falta dar el ID de myform en cualquier lugar. Por favor, sugiérame qué estoy haciendo mal aquí.
------------------------------------
Además de cambiar onClick para que sea onClick={openForm}, verifique su código HTML.
<Form open={open}/>
No veo el contenido del formulario. ¿Quizás quisiste decir esto?
<From open={open}>
<div class="formContainer" style={formContainer}>
<span class="title1" style={title1}>Chat</span>
<label for="msg"><b>Message</b></label>
....
</div>
</Form>
5
También intenté esto pero no obtuve resultados; en la consola recibí una advertencia como Advertencia: tipo de propiedad fallida: la propiedad onSubmit está marcada como requerida en el formulario, pero su valor no está definido. en el formulario (creado por HomePage) ¿se trata de algún problema con el navegador o algo así?
-Anusha
28/03/2021 a las 15:58
Es difícil saber qué está pasando sin ver el código completo. Como dice la advertencia, puede pasar el atributo onSubmit según sea necesario. como <Form open={open} onSubmit={someAction}></Form>. Pero no es el factor decisivo, probablemente el <Form> El componente no verifica que esté abierto correctamente. ¿Puedes pasar tu archivo <Formulario> componente?
- Adam Cai
28/03/2021 a las 16:19
Creo que el problema es que el estilo predeterminado de mi chatpopup es mostrar: ninguno con document.getElementById("myForm").style.display = "block"; este formulario de código se abre correctamente, pero con <Form open={open}> no se abre, const chatPopup = { display: "ninguno", posición: "fija", abajo: "75px", derecha: "15px", borde: "3px sólido #F1F1F1', zIndex:9 };
-Anusha
28/03/2021 a las 19:55
const chatPopup = { display: "ninguno", posición: "fijo", abajo: "75px", derecha: "15px", borde: "3px sólido #F1F1F1', zIndex :9 }; <Variante de botón="primario" onClick={openForm} style={openButton} >Chat IRB</Button> <Formulario abierto={abrir}> <div class="chatPopup" id= "miformulario" estilo={chatPopup}> <div class="formContainer" estilo={formContainer}><iframe customFrameSection style={customFrameSection} frameborder="1" id="AIChat" ></iframe> </div> </div> </Formulario>
-Anusha
28/03/2021 a las 20:10
Está bien. Sabes que {open} es solo un accesorio, y su valor es verdadero o falso y no abrirá ni cerrará el formulario mágicamente. Debes asignarle la lógica. Como veo en tus comentarios, puedes crear otro estilo como chatPopupOpen={display: "block" ...}, y luego haga esto: <div class="chatPopup"id= "miformulario" estilo = {abrir? chatPopupOpen: chatPopup}> si realmente no usas accesorios abiertos en tu componente Formulario.
- Adam Cai
28/03/2021 a las 21:25
------------------------------------
Estás proporcionando una función anónima al oyente onClick que no hace nada, llama a la función clickForm allí o pasa su referencia allí en onClick como -
const [open, setIsOpen] = useState(false);
const openForm = () => setIsOpen(true);
<button class="openButton" onClick={openForm} style={openButton}>Chat</button>
1
También probé esto pero no funcionó. <clase de botón="openButton" onClick={openForm} style={openButton}>Chat</button>
-Anusha
28/03/2021 a las 15:17
------------------------------------
Estás cerrando automáticamente la etiqueta del formulario, por lo que no hay nada que abrir cuando el usuario hace clic en Chat
Envuelva el contenido de su formulario dentro de la etiqueta del formulario y el error probablemente desaparecerá.
