0
154
Vistasenfrentando un problema bastante extraño al cerrar la ventana emergente en reaccionar. se llama al método pero la ventana emergente no se cierra
He creado un componente. en el que tengo un botón en el que una vez que haga clic se mostrará una ventana emergente. los datos para esa popup se colocan en otro componente. a continuación se muestra la ventana emergente.
el problema es que una vez que hago clic en el botón de cruz (x) en la esquina, mi ventana emergente no se cierra.
a continuación se muestra el código para iniciar la ventana emergente.
const [statusUpdateFlag, setStatusUpdateFlag] = useState(false); <td> <button type="button" onClick={(event) => handleStatusUpdateClick(event)}> click {statusUpdateFlag && ( <StatusUpdate certificate={props.certificate} handleStatusUpdateClick={handleStatusUpdateClick} closePopUp={closePopUp} /> )} </button> </td> una vez que el usuario haga clic en el button , statusUpdateFlag será verdadero y se abrirá una ventana emergente.
const handleStatusUpdateClick = async (event: SyntheticEvent) => { event.preventDefault(); setStatusUpdateFlag(true); } ahora en el botón de close acabo de hacer setStatusUpdateFlag(false); . incluso este método está siendo llamado. todavía no se cierra la ventana emergente.
const closePopUp = (event: any) => { alert("closepopup called"); event.preventDefault(); setStatusUpdateFlag(false); }; una vez que hago clic en el método X , se llama al método pero la popup no se cierra. 
a continuación se muestra el código para el botón X ,
<button className={styles.closeicon} onClick={(event) => props.closePopUp(event)} > x </button>que error estoy haciendo
1 Respuestas
Responde la pregunta0
Ha escrito el componente Popup como elementos secundarios de su botón, por lo que cuando hace clic en el cierre de la ventana emergente, también se activa un disparador para hacer clic en el botón principal, por lo que el estado visible de la ventana emergente vuelve a establecerse como verdadero.
const [statusUpdateFlag, setStatusUpdateFlag] = useState(false); <td> <button type="button" onClick={(event) => handleStatusUpdateClick(event)}> click {/* Issue is here */} {statusUpdateFlag && ( <StatusUpdate certificate={props.certificate} handleStatusUpdateClick={handleStatusUpdateClick} closePopUp={closePopUp} /> )} </button> </td>; Debe resaltar el componente StatusUpdate fuera del botón y, en mi opinión, para la interfaz de usuario, fuera del componente de tabla completo si es posible. Eso debería solucionar el problema.