在 clickAway 上關閉 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>

Answer 2

它不起作用，因為 Popper 組件是一個門戶，並且對於門戶，您必須以一種小的不同方式使用 de ClickAwayListener。

您可以查看MUI 文檔中的示例，但簡短的摘要是打開 popper 的按鈕也必須位於 ClickAwayListener 內，並且您必須在呈現 Popper 之前檢查它是否已打開。

    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) => (
    
        
        <ClickAwayListener onClickAway={handleClickAway}> // This wraps all
          <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>
        
            {open ? ( // You do the check here
              <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>
          ) : null}
        
          </div>
    
        </ClickAwayListener>
        
        );