material-ui - 如何防止 Material-ui Popover 关闭

Question

当“_addFilter” 或 “_removeFilter”
函数正在运行时，如何防止“popover”关闭 。

_addFilter = > 将对象添加到“过滤器”列表

_removeFilter => 从 'filterlist' 对象中删除一个对象

当“状态”改变时，“弹出框”会关闭。怎么屏蔽。

弹出框组件

  const [anchorEl, setAnchorEl] = useState(null);
  const buttonRef = React.useRef();
  const {  filters } = useSelector((state) => state.TableReducer);

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

  const _handleClose = () => {
    setAnchorEl(null);
  };

  const _addFilter = () => {
    dispatcher({ type: TABLE_FILTER_ADD });
  };

  const _removeFilter = () => {
    dispatcher({ type: TABLE_FILTER_REMOVE });
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

return (

<Popover
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={_handleClose}
    elevation={10}
    PaperProps={{ className: classes.popoverPaperProps, }}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
  >

      {
        filters?.map((item) => (
          <Item
            data={item}
            key={item.key}
          />
        ))
      }          

      <div className={classes.action}>
        <div>
          <Button 
            color="primary" 
            className={classes.addButton}
            startIcon={<AddIcon />}
            onClick={_addFilter}
          >
            Add

          </Button>

          <Button 
            color="primary" 
            className={classes.removeButton}
            startIcon={<ClearIcon />}
            onClick={_removeFilter}
          >
            Remove

          </Button>
        </div>

      </div>

  </Popover>
)

版本：“@material-ui/core”：“^4.11.4”，“react”：“17.0.2”，

谢谢你的帮助

标签： material-ui