Tengo un pequeño intento a continuación. Cuando ingreso el mouse dentro de la canasta, aparece un menú desplegable con un botón. Cuando hacemos clic en el botón, aparece un modal. Quiero que el modal se cierre solo cuando se hace clic en el botón cerrar modal. Pero cuando sacamos el mouse del navegador, la función hideDropdown se activa y el modal se cierra. Envié la función hideDropdown como apoyo al componente cuyo estado Modal se actualizó, pero esta vez solo funcionó la función hideDropdown y el estado isModalShow no se actualizó. Como puedo resolver esto?
Demostración: https://codesandbox.io/s/jolly-buck-1lgmiu
Esto fue complicado, pero finalmente lo conseguí. Tienes que agregar las funciones como a continuación. El efecto secundario es que el botón modal abierto se alternará en algún momento, pero eso se puede cambiar si levanta el modal, ya que depende del menú desplegable, supongo o implemente simplemente usando CSS, lo que sería mucho más fácil.
Pero en cuanto a su pregunta principal para onMouseleave , puede hacer lo siguiente. Esto es básicamente verificar los límites del navegador. Se agregó 10 en lugar de 0 porque la barra de desplazamiento de alguna manera interfería con el evento que se activaba en codepen. Entonces, se agregó como salvaguarda.
Además, se usa onMouseOver en lugar de onMouseEnter .
const hideDropdown = (event) => { if ( event.clientY <= 10 || event.clientX <= 10 || event.clientX >= window.innerWidth - 10 || event.clientY >= window.innerHeight - 10 ) { console.log("I'm out"); return; } setIsDropdownShow(false); }; return ( <div className="App" onMouseOver={showDropdown} onMouseLeave={hideDropdown}> <span className="basket">Basket</span> {isDropdownShow && <Dropdown hideDropdown={hideDropdown} />} </div>Aquí está elenlace de la caja de arena
La solución básica sería verificar si el usuario está en la ventana o no con window . Aquí está la muestra de trabajo de codesandbox https://codesandbox.io/embed/heuristic-pasteur-u4cd5e?fontsize=14&hidenavigation=1&theme=dark
import "./styles.css"; import Dropdown from "./Dropdown"; import { useState } from "react"; export default function App() { const [isDropdownShow, setIsDropdownShow] = useState(false); const showDropdown = () => { setIsDropdownShow(true); }; const hideDropdown = (event) => { if( typeof window !== "undefined" && window.document && window.document.createElement ){ return; } setIsDropdownShow(false); }; return ( <div className="App" onMouseEnter={showDropdown} onMouseLeave={hideDropdown} > <span className="basket">Basket</span> {isDropdownShow && <Dropdown hideDropdown={hideDropdown} />} </div> ); }¿Puede intentar desvincular el Modal de la propiedad isDropdownShow para que solo se pueda alternar el botón OpenModal y CloseModal ... Solo una solución?
import "./styles.css"; import Dropdown from "./Dropdown"; import { useState } from "react"; export default function App() { const [isDropdownShow, setIsDropdownShow] = useState(false); const [isModalShow, setIsModalShow] = useState(false); const showDropdown = () => { setIsDropdownShow(true); }; const showModal = () => { setIsModalShow(true); }; const hideModal = () => { setIsModalShow(false); }; const hideDropdown = () => { setIsDropdownShow(false); }; return ( <div className="App" > <div onMouseEnter={showDropdown} onMouseLeave={hideDropdown}> <span className="basket">Basket</span> {isDropdownShow && <button onClick={()=>showModal}> Open Modal<button/>} </div> <Dropdown hideModal={hideModal} IsModalShow={IsModalShow} /> </div> ); }