J'essaye d'utiliser le composant Drawer dans Material-UI React . Je veux que cet état à l'intérieur du composant Drawer ne soit pas perdu lors de la fermeture du composant Drawer, donc je passe variant = "persistent" dans le composant Drawer.
Maintenant, le problème est que le Tiroir persistant ne fournit pas de fonctionnalité de fond par défaut contrairement aux tiroirs temporaires , donc je ne peux pas fermer le clic extérieur.
J'ai essayé {{ModalProps = {{onBackdropClick: this.toggleDrawer}}}} mais cela ne fonctionne toujours pas.
Y a-t-il une solution de contournement pour cela?
Version de l'interface utilisateur matérielle: 1.0.0
Merci
6 Réponses :
Vous pouvez l'implémenter vous-même en ajoutant un div dans votre appFrame qui a un onClick qui ferme le tiroir comme ceci:
<div className={classes.appFrame}>
{this.state.open ?
<div style={{ position: "fixed", zIndex: 1, left: 0, right: 0, top: 0, bottom: 0 }}
onClick={() => this.handleDrawerClose()} />
: null
}
// rest of your code
p>
Merci, @milo, mais je cherchais une solution API Material-UI. Bien que votre réponse soit correcte.
J'utilise cette solution à la place, cela fonctionne comme un charme, où tous les autres accessoires Material-UI et ClickAwayListener ne pouvaient pas fonctionner ou ne correspondaient pas.
Il y a quelque chose de bizarre avec ça. J'essayais de faire la même chose et devais faire une recherche sur Google parce que cela me déroutait. Le onClickedAway est appelé à chaque fois que vous cliquez ailleurs, également lorsque le tiroir n'est pas ouvert (donc il est toujours rendu, lorsqu'il n'est pas ouvert?) De toute façon. cela entraîne un comportement dans lequel la fonction d'ouverture / fermeture se bat, et lorsque je clique sur mon bouton d'ouverture, la fonction de fermeture est également appelée à partir de ClickAwayListener.
Cela fonctionne bien sauf si votre bouton pour déclencher le tiroir est en dehors de ClickAwayListener . Dans ce cas, vous devez ajouter une logique à la fonction onClickAway pour vérifier si le ShowDrawerButton a simplement été cliqué et ne pas déclencher l'action du code ClickAwayListener .
Pour le bien des internautes qui se posent sur cette question. Si vous rencontrez des problèmes avec ClickAwayListener et n'utilisez pas variant = 'persistent' . Essayez plutôt ceci: Fournir une fonction de basculement à ModalProps onBackdropClick
<Drawer
open={drawerIsOpen}
ModalProps={{ onBackdropClick: this.toggleDrawer }}
>
<MenuItem>drawer item 1</MenuItem>
</Drawer>
Merci pour cela. ClickAwayListener ne fonctionnait pas non plus pour moi car il se déclenchait au moment où j'ai essayé d'ouvrir le tiroir, bloquant ainsi l'ouverture à bascule. Cela a résolu le problème et je pense personnellement que c'est plus élégant que la réponse acceptée
Cela n'a fonctionné que parce que vous avez ignoré la contrainte variant = "persistent" qui supprime l'arrière-plan ... c'est écrit dans la question.
Le ClickAwayListener ne fonctionnait pas pour moi lors de l'utilisation de variant = "temporaire" . Cette solution a bien fonctionné.
Je passe un peu de temps à m'entraîner pour résoudre ce problème, mais j'ai trouvé une solution vraiment utile et consiste à changer la variante en temporaire et à utiliser de onEscapeKeyDown et onBackdropCliquez comme suit:
<Drawer
variant="temporary"
onEscapeKeyDown={handleDrawerClose}
onBackdropClick={handleDrawerClose}
open={open}
...rest of your code...
Fait avec facilité. Merci beaucoup pour cette solution super utile.
Je ne suis pas sûr que cela fonctionne avec la version 1.0.0 mais cette approche fonctionne pour moi en notant que j'utilise le tiroir de "material-ui / core @ 4.10"
<Drawer ... open={this.state.open} onClose={() => this.handleDrawerClose()}>
....
</Drawer>
Récemment découvert à propos de ce super hook useOnClickOutside => CodeSandBox et remplacé tout mon par lui. Beaucoup plus élégant que d'ajouter un élément au dom et vraiment facile à utiliser avec Mui maintenant que vous pouvez passer un accessoire de référence à n'importe quel composant Material-ui.