Déclenchez simultanément les événements d'entrée et de sortie de la souris

Question

      
        
          
            
              
                {menus &&
                  menus.longueur > 0 &&
                  menus.map((élément, index) => (
                    
                       {
                          setNestedArr([...élément?.enfants]);
                          popoverEnter(e);
                          setAnchorEl(e?.currentTarget);
                        }}
                        onMouseLeave={(e) => {
                          popoverLeave(e);
                        }}**
                        onClick={(e) => {
                            console.log(élément,'parent_cliqué')
                        }}
                      >
                        
                              
                                {micons[élément?.nom] ? (
                                  micons[élément?.nom]
                                ) : (
                                  {item?.icon_class}
                                )}
                              ≪/Boîte>
                              
                                {nom de l'article}
                              
                            
                          }
                        />
                      
                    ≪/Boîte>
                  ))}
              
            ≪/Boîte>
          ≪/Boîte>
        ≪/Boîte>
        {ouvrir && nestedArr.longueur ? (
           setOpen(val)}
            ancreEl={ancreEl}
            nestedArr={nestedArr}lightBackground={lightBackground}
            couleursecondaire={couleursecondaire}
            popoverAnchor={popoverAnchor}
            popoverEnter={popoverEnter}
            popoverLeave={popoverLeave}
          />
        ) : nul}
      ≪/Boîte>
    
 Il y a quelques menus sur le côté gauche de la page (utilisant la bibliothèque MUI et la bibliothèque materials-ui-nested-menu-item), lorsque la souris passe sur Listitems, elle affichera un menu avec imbriqué ou sous-menu et fermez le menu lorsque la souris quitte, mais le problème auquel je suis confronté est que l'événement onMouseLeave est déclenché en même temps lors du survol du menu, de sorte que le menu ne s'ouvre pas. Je n'arrive pas à comprendre quel est le problème. 
            

Answer 1

Le problème que vous décrivez est courant lors de la gestion des éléments imbriqués et des événements de souris dans React. Lorsque vous avez des éléments imbriqués et que vous attachez des événements onMouseEnter et onMouseLeave à l'élément parent, déplacer la souris sur l'élément enfant déclenchera l'événement onMouseLeave de l'élément parent même si la souris est toujours à portée de l'élément parent. C'est parce que la souris a « quitté » l'élément parent et « est entrée » dans l'élément enfant.

Pour résoudre ce problème, vous pouvez utiliser les événements onMouseOver et onMouseOut au lieu de onMouseEnter et onMouseLeave. Les événements onMouseOver et onMouseOut ne se déclenchent pas de la même manière, ils peuvent donc contribuer à éviter ce problème.