Javascript 我想添加一个x按钮来关闭物料提升机

我已经做了一个材料的ui波普尔我已经添加了一个按钮（x）关闭波普尔

我添加了一个按钮和一个const handleClose，当点击时应该关闭popper，但这不起作用（什么都没有发生），每个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 handleClose = () => {
    setAnchorEl({
      open: 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>

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

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

    );

const Experiences=memo(
（道具）=>{
const{className}=props；
常量类=使用样式（道具）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量handleClick=（事件）=>{
Setancorel（事件当前目标）；
};
//常量开=布尔值（主播）；
常量handleClose=（）=>{
塞坦科雷尔({
开放：假
});
};
常量经验=（img、标题、id、PopOver类别）=>(
{title}
x
{
PopOvertegory.map（url=>(
))
}
);

使用此方法：

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
import Button from '@material-ui/core/Button';
import Popper from '@material-ui/core/Popper';
import gastronomia from 'assets/experiences/gastronomia.jpg';
import productos from 'assets/experiences/productos.jpg';
import giftcard from 'assets/experiences/giftcard.jpg';
import diversion from 'assets/experiences/diversion.jpg';
import deporte from 'assets/experiences/deporte.jpg';
import belleza from 'assets/experiences/belleza.jpg';
import gastronomiaExperiences from 'data/gastronomia';
import productosExperiences from 'data/productos';
import giftcardExperiences from 'data/giftcard';
import diversionExperiences from 'data/diversion';
import deporteExperiences from 'data/deporte';
import bellezaExperiences from 'data/belleza';


// Proptypes definitions to the component.
const propTypes = {
  /** Custom root className. */
  className: PropTypes.string,

};

// Default props definitions.
const defaultProps = {
  className: null,
};

// Component's styles
const useStyles = makeStyles(theme => ({
  root: {
    display: 'block',
    margin: '0 auto',
    maxWidth: '50%',
    [theme.breakpoints.down('md')]: {
      maxWidth: '70%',
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '100%',
    },
    '& .experiences-column': {
      display: 'inline-block',
      verticalAlign: 'top',
      textAlign: 'center',
      '&.col1': {
        width: '36.31%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '&.col2': {
        width: '63.69%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
      '& .experience': {
        padding: 2,
        position: 'relative',
        '& img': {
          width: '100%',
          display: 'block',
        },
        '& .experience-title': {
          position: 'absolute',
          bottom: 30,
          left: 0,
          right: 0,
          textAlign: 'center',
        },
      },
    },
  },
  gastronomia: {
    backgroundColor: 'rgba(0,185,208,0.9)',
    position: 'absolute',
    marginTop: '-220px',
    marginLeft: '25%',
    width: '50%',
    height: '220px',
  },
  giftcard: {
    backgroundColor: 'rgba(221,165,174,0.9)',
    position: 'absolute',
    marginTop: '-320px',
    marginLeft: '25%',
    width: '50%',
    height: '320px',
  },
  deporte: {
    backgroundColor: 'rgba(189,143,205,0.9)',
    position: 'absolute',
    marginTop: '-320px',
    marginLeft: '25%',
    width: '50%',
    height: '320px',
  },
  productos: {
    backgroundColor: 'rgba(221,165,174,0.9)',
    position: 'absolute',
    marginTop: '-220px',
    marginRight: '18%',
    width: '50%',
    height: '220px',
  },
  diversion: {
    backgroundColor: 'rgba(255,176,10,0.9)',
    position: 'absolute',
    marginTop: '-320px',
    marginRight: '18%',
    width: '50%',
    height: '320px',
  },
  belleza: {
    backgroundColor: 'rgba(229,166,187,0.9)',
    position: 'absolute',
    marginTop: '-320px',
    marginRight: '18%',
    width: '50%',
    height: '320px',
  },
  paper: {
    '& img': {
      width: '180px',
      padding: '0 10px 0 10px',
    },
  },

}), { name: 'ExperiencesStyle' });


/**
 * Component used to render a grid of experiences.
 *
 * @param {object} props - The component's props.
 * @returns {object} React element.
 */
const Experiences = memo(
  (props) => {
    const { className } = props;
    const classes = useStyles(props);

    const [poperOpen, setPoperOpen] = React.useState([]); // array of popers states
    const [justChange, setJustChange] = React.useState(false); // array of popers states

    // one handle click for open/close    
    const handleClick = (e, _id, _open) => {
       let idx = poperOpen.findIndex(x => x.id === _id);

       // for show just one comment this lines : 
       //let a = poperOpen;
       //if(idx > -1 ){
          a.splice(idx, 1);
       //}
       let a = [];
       a.push({id: _id, open: _open, anchorEl: e.currentTarget}); 

       setPoperOpen(a);
       setJustChange(!justChange);
    };

    const experience = (img, title, id, popoverCategory, dontRemoveMe) => (
     <div>
      <div
        className="experience"
        aria-describedby={id}
        id={id}
        onClick={(e)=>handleClick(e, id, true)} 
        onKeyDown={(e)=>handleClick(e, id, true)}
        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>
        </div>

        <Popper
          id={id}
          open={poperOpen.findIndex(x => x.id === id) > -1 && poperOpen.find(x => x.id === id).open }
          anchorEl={poperOpen.findIndex(x => x.id === id) > -1 ? poperOpen.find(x => x.id === id).anchorEl : undefined} 
          className={clsx(classes[id])}
          modifiers={{
            flip: {
              enabled: false,
            },
          }}
        >         
          <Button onClick={(e)=>handleClick(e, id, false)}>x</Button>
          <div className={clsx(classes.paper)}>
            {
              popoverCategory.map(url => (

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

    );

    return (

      <div className={clsx(classes.root, className)}>
        <div className="experiences-column col1">
          {experience(gastronomia, 'GASTRONOMÍA', 'gastronomia', gastronomiaExperiences, justChange)}
          {experience(giftcard, 'GIFT CARD', 'giftcard', giftcardExperiences, justChange)}
          {experience(deporte, 'DEPORTE', 'deporte', deporteExperiences, justChange)}
        </div>
        <div className="experiences-column col2">
          {experience(productos, 'PRODUCTOS', 'productos', productosExperiences, justChange)}
          {experience(diversion, 'DIVERSIÓN', 'diversion', diversionExperience, justChanges)}
          {experience(belleza, 'BELLEZA', 'belleza', bellezaExperiences, justChange)}
        </div>
      </div>

    );
  },
);

// Component proptypes.
Experiences.propTypes = propTypes;

// Component default props.
Experiences.defaultProps = defaultProps;

export default Experiences;

import React，{memo}来自“React”；
从“道具类型”导入道具类型；
从'@material ui/styles'导入{makeStyles}；
从“@material ui/core/Typography”导入排版；
从“clsx”导入clsx；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Popper”导入Popper；
从“资产/体验/gastronomia.jpg”导入gastronomia；
从“assets/experiences/productos.jpg”导入productos；
从“assets/experiences/giftcard.jpg”导入giftcard；
从“资产/经验/分流.jpg”导入分流；
从“资产/经历/驱逐出境.jpg”导入驱逐出境；
从“资产/经验/belleza.jpg”导入belleza；
从“数据/美食”中输入美食经验；
从“数据/产品”导入产品经验；
从“数据/giftcard”导入giftcard经验；
从“数据/转移”导入转移体验；
从“数据/递解出境”导入递解出境经验；
从“数据/belleza”导入BellezaExperience；
//将属性类型定义添加到组件。
常量属性类型={
/**自定义根类名*/
类名：PropTypes.string，
};
//默认道具定义。
const defaultProps={
类名：null，
};
//组件的样式
const useStyles=makeStyles（主题=>({
根目录：{
显示：“块”，
边距：“0自动”，
maxWidth:'50%'，
[主题.breakpoints.down（'md'）]：{
maxWidth:'70%'，
},
[theme.breakpoints.down（'sm'）：{
maxWidth:“100%”，
},
“&.体验专栏”：{
显示：“内联块”，
垂直排列：“顶部”，
textAlign:'中心'，
“&.col1”：{
宽度：36.31%，
[theme.breakpoints.down（'sm'）：{
宽度：'首字母'，
},
},
“&.col2”：{
宽度：63.69%，
[theme.breakpoints.down（'sm'）：{
宽度：'首字母'，
},
},
"经验":{
填充：2，
位置：'相对'，
“&img”：{
宽度：“100%”，
显示：“块”，
},
"及.经验题目":{
位置：'绝对'，
底数：30，
左:0,，
右:0,，
textAlign:'中心'，
},
},
},
},
美食：{
背景颜色：“rgba（0185208,0.9）”，
位置：'绝对'，
marginTop:“-220px”，
保证金金额：25%，
宽度：“50%”，
高度：'220px'，
},
礼品卡：{
背景颜色：“rgba（221165174,0.9）”，
位置：'绝对'，
marginTop:“-320px”，
保证金金额：25%，
宽度：“50%”，
高度：“320px”，
},
驱逐：{
背景颜色：“rgba（189143205,0.9）”，
位置：'绝对'，
marginTop:“-320px”，
保证金金额：25%，
宽度：“50%”，
高度：“320px”，
},
产品：{
背景颜色：“rgba（221165174,0.9）”，
位置：'绝对'，
marginTop:“-220px”，
marginRight：“18%”，
宽度：“50%”，
高度：'220px'，
},
改道：{
背景颜色：“rgba（255176,10,0.9）”，
位置：'绝对'，
marginTop:“-320px”，
marginRight：“18%”，
宽度：“50%”，
高度：“320px”，
},
贝莱扎：{
背景颜色：“rgba（229166187,0.9）”，
位置：'绝对'，
marginTop:“-320px”，
marginRight：“18%”，
宽度：“50%”，
高度：“320px”，
},
论文：{
“&img”：{
宽度：“180px”，
填充：“0 10px 0 10px”，
},
},
})，{name:'experiencestyle'}）；
/**
*用于渲染经验网格的组件。
*
*@param{object}props-组件的props。
*@返回{object}元素。
*/
常量经验=备忘录(
（道具）=>{
const{className}=props；
常量类=使用样式（道具）；
const[poperOpen，setPoperOpen]=React.useState（[]）；//popers状态数组
const[justChange，setJustChange]=React.useState（false）；//popers状态数组
//单击一个手柄可打开/关闭
const handleClick=（e，_id，_open）=>{
设idx=poperOpen.findIndex（x=>x.id===u id）；
//对于“仅显示一条注释”这行：
//设a=poperOpen；
//如果（idx>-1）{
a、 拼接（idx，1）；
//}
设a=[]；
a、 push（{id:_id，open:_open，anchorEl:e.currentTarget}）；
setPoperOpen（a）；
setJustChange（！justChange）；
};
const experience=（img、title、id、popsover目录、dontRemoveMe）=>(
handleClick（e，id，true）}
onKeyDown={（e）=>handleClick（e，id，true）}
role=“按钮”
tabIndex=“0”
>
{title}
x、 id==id）>-1&&poperOpen.find（x=>x.id==id.open}
anchorEl={poperOpen.findIndex（x=>x.id==id）>-1？poperOpen.find（x=>x.id==id）。anchorEl:未定义}
className={clsx（类[id]）}
修饰语={{
翻转：{
启用：false，
},
}}
>         
汉德莱克里