Блог

Таким образом, «mouseleave» запускается, когда я покидаю дочерний компонент styledLink и запускаю. Он у меня на контейнере, и я хочу, чтобы он сработал, когда я оставлю весь контейнер. Я перепробовал множество потенциальных решений, но Гэтсби, похоже, не хочет хорошо работать с этими слушателями событий. Любая входная помощь! Спасибо 🙂

 const MenuDropDown: React.FClt;Propsgt; =  ({ menuLinks = [  { title: 'Events', url: '/events' },  { title: 'Performers', url: '/performers' },  { title: 'Venues', url: '/venues' },  ], setFocus, focus, explore }) =gt; {  const ref = useReflt;HTMLDivElementgt;(null);   useEffect(() =gt; {  /**  * Alert if hovered outside of element  */  function handleUserEvent(event: any) {  event.stopPropagation();  console.log("fired");  console.log(ref.current)  if (ref amp;amp; ref.current) {  setFocus(false);  }  }  // Bind the event listener   ref.current?.addEventListener('mouseleave', handleUserEvent);  return () =gt; {  ref.current?.removeEventListener('mouseleave', handleUserEvent);  };  }, [ref]);   return (  lt;S.Wrapper explore={explore}gt;  lt;S.Container ref={ref}gt;  {menuLinks.length gt; 0 amp;amp;  menuLinks.map((data, key) =gt; {  const url = data.url;  const title = data.title;  return (  lt;S.StyledLink key={key} activeStyle={{ background: 'rgb(245, 245, 244)' }} to={url}gt;  {title}  lt;/S.StyledLinkgt;  );  })}  lt;/S.Containergt;  lt;/S.Wrappergt;  ); };  export default MenuDropDown;  

 export const Wrapper = styled.divlt;{ explore?: boolean; isAuthenticated?: boolean }gt;`  box-shadow: rgb(36 63 97 / 12%) 0px 3px 20px, rgb(36 63 97 / 8%) 0px 1.5px 4px;  border-radius: 10px;  //opacity: 0;  background-color: white;  position: absolute;  top: 100%;  display: block;  z-index: 1000;  height: 100%;  pointer-events: none;  /* transition: opacity 200ms ease-in-out 0s; */  width: 140px;  margin-top: 28px;  margin-right: ${(props) =gt; (props.explore ? '65px' : null)};  margin-left: ${(props) =gt; (props.explore ? null : '250px')}; `;  export const Container = styled.div`  pointer-events: none;  z-index: 900;  display: flex;  flex-direction: column;  padding: 1.25rem;  border-radius: 10px;  //background: rgba(245, 245, 244, 0.2);  background: white;  border-right: 1px solid rgba(0, 0, 0, 0.08);  /* height: 200px;  margin-top: 200px; */ `;  export const StyledLink = styled(Link)`  pointer-events: auto;  text-align: left;  -webkit-font-smoothing: antialiased;  font-family: proxima-nova, 'Proxima Nova', 'Helvetica Neue', Arial, Helvetica, sans-serif;  font-size: 1.5rem;  line-height: 1.575rem;  margin: 5px 0px;  font-weight: 500;  /* box-sizing: border-box; */  width: 100%;  padding: 0.95rem 1.15rem;  border-radius: 0.5rem;  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;  color: rgb(24, 24, 24); `;  

Мне нужно было убедиться, что «указатель-события: авто;» был применен ко всем дочерним компонентам. Это решило проблему