按钮 onClick 打开所有图像预览而不是一个

Question

我试图弄清楚如何打开一个项目（在我的情况图片库中），但不是一次全部打开。 我正在使用 FsLightbox 依赖项。在我触发按钮打开图片库之前，我的代码似乎可以正常工作，但它会打开所有三列。

index.js

import React, { useState } from 'react';

import Menu from './Menu';
import Button from './Button';
import data from './Data';
import './style.css';

const allCategories = ['Visi', ...new Set(data.map(item => item.category))];


const Projects = () => {


    const [menuItem, setMenuItem] = useState(data);
  const [buttons, SetButtons] = useState(allCategories);
  // console.log(data);

  const filter = (button) => {
    if(button === 'Visi'){
      setMenuItem(data);
      return;
    }
    const filteredData = data.filter(item => item.category === button);
    setMenuItem(filteredData);
  }

    return (
        <div id="projects" className="App">
        <div className="title">
            Projektai
        </div>
        <Button button={buttons} filter={filter}/>
        <Menu menuItem={menuItem}/>
      </div>
    )
}

export default Projects

data.js 文件中我的所有数据和图像

import skardis1 from '../../images/projects/1.jpg'
import skardis2 from '../../images/projects/2.jpg'
import skardis3 from '../../images/projects/3.jpg'

const data = [
    {
        id:1,
        image: skardis1,
        title: 'PAVADINIMAS',
        category: 'Privatūs',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectimages: [skardis2, skardis3]
    },
    {
        id:2,
        image: skardis2,
        title: 'PAVADINIMAS',
        category: 'Visuomeniniai',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectimages: [ skardis3, skardis2 ]

    },
    {
        id:3,
        image: skardis3,
        title: 'PAVADINIMAS',
        category: 'Visuomeniniai',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectimages: [ skardis3, skardis2 ]

    },
    
];

export default data;

和主 Menu.js 文件

import React, { useState } from 'react';
import FsLightbox from 'fslightbox-react';
import {Animated} from "react-animated-css";

function Menu({menuItem}) {

    const [toggler, setToggler] = useState(false);
    
    return (
        <div className="item">
            {
            menuItem.map((item) => {
                    return  <div className="item-con" key={item.id}>
                        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
                            <div className="item-container">
                                <img src={item.image} alt=""/>
                                <h2>{item.title}</h2>
                                <p>{item.description}</p>
                                <button onClick={() => setToggler(!toggler)}> Daugiau</button>
                            </div>
                        </Animated>
                    </div>
                })
            }
            {
            menuItem.map((item) => {
                
                return <div>
                    <FsLightbox
                    toggler={toggler}
                    sources={item.projectimages}
                    />
                </div>})
            }
        </div>
    )
}

export default Menu;

正如我所说，然后我单击按钮，它会打开所有三个项目。我想点击一个项目部分的按钮；它仅在预览中打开该项目图像..现在我必须关闭图像预览三次。添加了 IMG 我的项目列现在的样子

Answer 1

这是因为所有FsLightbox 都有一个共享的toggler 状态。

要解决这个问题，您可以创建一个MenuItem 组件来呈现每个项目，每个项目都有自己的toggler 状态。例如：

function Menu({ menuItems }) {
  return (
    <div className="items">
      {menuItems.map(item => <MenuItem item={item} />)}
    </div>
  );
}

function Menuitem({ item }) {
  const [toggler, setToggler] = useState(false);

  return (
    <div className="item">
      <div className="item-con" key={item.id}>
        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
          <div className="item-container">
            <img src={item.image} alt="" />
            <h2>{item.title}</h2>
            <p>{item.description}</p>
            <button onClick={() => setToggler(!toggler)}> Daugiau</button>
          </div>
        </Animated>
      </div>
      <div>
        <FsLightbox toggler={toggler} sources={menuItem.projectimages} />
      </div>
    </div>
  );
}

现在每个MenuItem 都有自己的本地状态，它们应该根据您单击的按钮单独打开。