Cerrar al hacer clic fuera de javascript
Ahora tienes este modal que aparecerá y quieres poder cerrarlo.Vamos a hacer un ejemplo muy rápido para demostrar cómo funciona esto.Necesitamos ocultar el modal por defecto.Hay MUCHAS maneras diferentes de hacerlo, como display: none, visibility: hidden, o algo que a Wes le gusta hacer es darle una opacidad:0, que no servirá en nuestro caso. Eso es porque incluso si le das al modal una opacidad de 0, verás que el modal impedirá que los otros elementos sean pulsados como los botones.Eso es porque el modal-outer está realmente todavía ahí, incluso si le das una opacidad de cero.Lo que puedes hacer es darle al modal-outer un evento puntero de none como así .modal-outer {
}Ahora cuando hagas clic en el botón de cada tarjeta, verás que la tarjeta se registra en la consola.Lo bueno de usar closest como hicimos es que puedes tomar cualquier elemento, como uno de los elementos h2 de la tarjeta y buscar el div más cercano, el elemento HTML más cercano.Si hay algo que no encuentra (como $0.closest(‘.doesnotmatch’)) devolverá null porque no hay ningún padre del mismo.
Cerrar menú al hacer clic fuera de javascript
export default App;Count: 0Todo funciona como se espera. A continuación queremos resetear el estado (aquí: count) cada vez que un usuario haga click fuera del botón. Podemos escribir el manejador de eventos para restablecer el estado, sin embargo, aún no está claro dónde usarlo:function App() { const [count, setCount] = React.useState(0);
return ref;};El gancho personalizado inicia una ref de React que se devuelve eventualmente. En realidad aún no se usa en los detalles de implementación del hook. Además, el gancho personalizado utiliza el gancho useEffect de React para asignar (y eliminar) un escuchador de eventos (aquí: evento click) a nivel de documento. Después de todo, cada vez que se haga clic en el documento, se ejecutará el manejador y por lo tanto la función callback pasada. Ahora el gancho personalizado se puede utilizar de la siguiente manera en nuestro componente React: pasar el manejador de eventos como función callback al gancho — que se ejecuta cada vez que se hace clic en el documento. Además, utiliza la referencia devuelta (aquí: ref) y asígnala al elemento HTML del botón:function App() { const [count, setCount] = React.useState(0);
Si se hace clic fuera del elemento javascript
Añadimos un manejador de clics en el objeto document.Usamos el método document.getElementById() para seleccionar el elemento que queremos ocultar cuando el usuario haga clic fuera.A la función manejadora de eventos se le pasa el objeto evento como parámetro.Usamos el método
para comprobar si el elemento sobre el que se ha hecho clic no está contenido por el elemento original.Si el elemento sobre el que se ha hecho clic no está contenido en la caja, ocultamos el elemento caja.El método contains() toma un Nodo como parámetro y devuelve un valor booleano que indica si el Nodo pasado está contenido en el Nodo sobre el que se llamó al método.Si el elemento sobre el que se ha hecho clic no está contenido en el elemento caja, entonces el usuario
Haga clic fuera reaccionar
}Un componente básico de React. Hasta ahora, no estamos haciendo mucho con él. Sólo estamos devolviendo los hijos tal y como son pasados a nuestro componente OutsideClickHandler. Envolvamos los hijos con un elemento div y adjuntemosle una referencia React.import React, { createRef } from ‘react’;
}Como no estamos usando JSX, estamos usando directamente la API createElement de React para envolver nuestros hijos en this.props.component o en un span. this.props.component puede ser un componente React o cualquiera de los nombres de etiqueta de los elementos HTML como ‘div’, ‘section’, etc. Pasamos todos los props que queremos pasar a nuestro elemento recién creado llamando al método de clase getProps como segundo argumento.Escribamos ahora el método getProps:class OutsideClickHandler extends React.Component {
}Si nuestro nuevo componente React o cualquier cosa dentro de él – que podría ser un portal React – es pulsado, establecemos la propiedad de instancia de clase clickCaptured a true. Ahora, vamos a añadir los eventos mousedown y touchstart al documento, para que podamos capturar el evento que está burbujeando desde abajo.class OutsideClickHandler extends React.Component {
