У меня много попперов, и я хочу, чтобы тот, который открыт, закрывался, когда открывался другой.

Question

У меня есть компонентный опыт, который создает 6 опыта, и у каждого опыта есть поппер с изображениями. Я хочу иметь возможность закрыть открываемый поппер, если щелкнуть по другому попперсу, но я теряюсь, как изменить свой код для этого ..

Это мой компонент

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

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

    // one handle click for open/close
    const handleClick = (e, _id, _open) => {
      const idx = poperOpen.findIndex(x => x.id === _id);
      const a = poperOpen;
      if (idx > -1) {
        a.splice(idx, 1);
      }
      a.push({ id: _id, open: _open, anchorEl: e.currentTarget });

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

    const experience = (img, title, id, popoverCategory) => (
      <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>

    );

Мне нужно изменить это

const [poperOpen, setPoperOpen] = React.useState([]);

на что-то подобное, я думаю

const [poperOpen, setPoperOpen] = React.useState (null);

но когда я делаю это, я получаю сообщение об ошибке

TypeError: Невозможно прочитать свойство 'findIndex' с нулевым значением

Answer 1

Правильный способ - изменить предыдущее состояние массива poperOpen и не изменять его напрямую, как вы это делали в своем коде при использовании переменной a, которая технически является ссылкой на poperOpen .

Найдите здесь возможное рабочее решение для handleClick:

const handleClick = (e, _id, _open) => {
  setPoperOpen(prevArray => {
     const idx = prevArray.findIndex(x => x.id === _id);
     const a = [...prevArray];
     if (idx > -1) {
        a.splice(idx, 1);
     }
     a.push({ id: _id, open: _open, anchorEl: e.currentTarget });
     return a;
  });

  setJustChange(!justChange);
};

Надеюсь, это поможет!

Answer 2

Вы можете вручную закрыть все Poppers внутри вашего метода handleClick и просто открыть правильный.

const handleClick = (e, _id, _open) => {
  const idx = poperOpen.findIndex(x => x.id === _id);
  const a = poperOpen;
  a.forEach((part, index) => {
    a[index].open = false;
  });
  ...
};