При нажатии на кнопку «Закрыть» всплывающее окно с материалом

Question

У меня есть всплывающее окно пользовательского интерфейса для материала, и я пытаюсь закрыть его, когда щелкаю за пределами поппера с помощью ClickAwayListener, но не могу заставить это работать. Я добавил ClickAwayListener вокруг popper и попытался добавить его вокруг содержимого в 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 style={{display:'block',position:'relative',top:50,left:100}}>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}>PopUp</Button>
      {
        isOpen ? 
        <MyPopper {...{clickAwayHandler,isOpen}} /> :
        null
       }
    </div>
  )
}

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

<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>