0
votes

Onmouseleave pour Popover avec paramètre HiderackDrop (UI de matériau)

   <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
    >
I have this kind of popover , I want to execute onMouseLeave event , but it doesn't work . How can I solve it ? It happens because as I think there is not another html element out of this element , and this is a reason that it doesn't emit any action . Maybe exist solving of this issue ?Here is the link on the doc - https://material-ui.com/utils/popover/

reactjs html css material-ui

1 commentaires

Qu'essayez-vous d'exécuter avec l'événement Onmouseleave?

3 Réponses :

0
votes

Je ne suis pas trop sûr de ce que vous essayez d'exécuter, mais que le matériau-ui POPOVER a une fonctionnalité onexit équivalente à Onmouseleave.

Peut-être que vous pouvez faire quelque chose comme ça, P>

     <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
       onExit={() => {
         PLACE YOUR CODE HERE TO EXECUTE!!!!!
       }}
     >

1 commentaires

oui, je l'ai essayé aussi, mais je pense que cela ne fonctionnera que dans le cas où la toile de fond ne sera pas cachée

2
votes

Essayez Onmouselave sur PaperProps = {{Onmouseleave: OnClose}}

1 commentaires

Tous les événements sont affichés ici: réactjs.org/docs/handling-events.html sa Stroit d'avenir.

2
votes

J'ai eu le même problème et que leur exemple n'aide pas.

Vous devez désactiver les événements du pointeur: P>

<Popover
    style={{ pointerEvents: 'none'}}
    disableRestoreFocus
    ...
>
...

0 commentaires