点击离开时关闭 material-ui popper

Question

我有一个材质 ui popper，当我使用 ClickAwayListener 在 popper 外部单击时，我试图将其关闭，但我无法让它工作。我在 popper 周围添加了 ClickAwayListener 并尝试在 popper 的内容周围添加它，但没有任何接缝工作。

我对 material-ui 真的很陌生，所以我对如何做到这一点有点迷茫

这是我的代码

const Experiences = memo(
(props) => {
const { className } = props;
const classes = useStyles(props);

const [anchorEl, setAnchorEl] = React.useState(null);

const handleClick = (event) => {
  setAnchorEl(event.currentTarget);
};

// const open = Boolean(anchorEl);
const handleClickAway = () => {
setAnchorEl(false);
};

const experience = (img, title, id, popoverCategory) => (
  <div
    className="experience"
    aria-describedby={id}
    id={id}
    onClick={handleClick}
    onKeyDown={handleClick}
    role="button"
    tabIndex="0"
  >
    <img
      data-sizes="auto"
      className="lazyload"
      data-src={img}
      alt={title}
    />
    <div className="experience-title">
      <Typography
        color="textSecondary"
        variant="subtitle2"
        className="highlight highlight1"
        display="inline"
      >
        { title }
      </Typography>
    </div>


   <ClickAwayListener onClickAway={handleClickAway}>
    <Popper
      id={id}
      open={anchorEl && anchorEl.id === id}
      anchorEl={anchorEl}
      className={clsx(classes[id])}
      modifiers={{
        flip: {
          enabled: false,
        },
      }}
    >               
      <Button >x</Button>
      <div className={clsx(classes.paper)}>
        {
          popoverCategory.map(url => (

            <img
              key={id}
              data-sizes="auto"
              className="lazyload"
              src={url}
              alt={title}
            />
          ))
        }
      </div>
    </Popper>

      </ClickAwayListener>
  </div>

);

Answer 1

您可以<Popper />使用父组件本地状态中的变量来切换组件可见性，并将其作为道具传递：

//dependencies
const { render } = ReactDOM,
      { useState } = React,
      { Popper, Button, Paper, ClickAwayListener } = MaterialUI
      
//custom popper
const MyPopper = ({isOpen,clickAwayHandler}) => (
    <ClickAwayListener onClickAway={clickAwayHandler}>
        <Popper open={isOpen}>
          <Paper className="popper">There goes my custom popper</Paper>
        </Popper>
    </ClickAwayListener> 
)

//main page
const MainPage = () => {
  const [isOpen, setIsOpen] = useState(true),
        clickAwayHandler = () => setIsOpen(false),
        clickHandler = () => setIsOpen(true)
  return (
    <div>
      <Button onClick={clickHandler}>Toggle pop-up</Button>
      {
        isOpen && <MyPopper {...{clickAwayHandler,isOpen}} /> 
      }
    </div>
  )
}

//render
render (
  <MainPage />,
  document.getElementById('root')
)

.popper {
  display: block;
  position: relative;
  top: 50px;
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script><div id="root"></div>