React App，努力创建一个独立的 handleToggle

Question

当我点击打开图片，激活一个新的 class 时，它起作用了，在所有显示最后一张细节的图片上创建“活动”。我正在努力寻找一种隔离方法，当单击图像时，只有该图像会详细显示。正在按照代码和link检查问题的结果。

Container.js

import React, { useState } from "react";
import "./Container.css";
import img1 from "./img/img1.jpg";
import img2 from "./img/img2.jpg";
import img3 from "./img/img3.jpg";
import img4 from "./img/img4.jpg";

function Container() {
  const [isActive, setActive] = useState("false");

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className="container">
      <div className="box">
        <div className={`imgBx ${isActive ? "" : "active"}`}>
          <img src={img1} alt="img1" onClick={handleToggle} />
        </div>
      </div>
      <div className="box">
        <div className={`imgBx ${isActive ? "" : "active"}`}>
          <img src={img2} alt="img2" onClick={handleToggle} />
        </div>
      </div>
      <div className="box">
        <div className={`imgBx ${isActive ? "" : "active"}`}>
          <img src={img3} alt="img3" onClick={handleToggle} />
        </div>
      </div>
      <div className="box">
        <div className={`imgBx ${isActive ? "" : "active"}`}>
          <img src={img4} alt="img4" onClick={handleToggle} />
        </div>
      </div>
    </div>
  );
}

export default Container;

Container.css

.container {
  position: absolute;
  display: flex;
  height: calc(100% - 200px);
  width: calc(100% - 200px);
  z-index: 100;
}
.container .box {
  position: relative;
  width: 25%;
  height: 100%;
  overflow: hidden;
  border-right: 10px solid #111;
}
.container .box:last-child {
  border-right: none;
}
.container .box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  opacity: 0.5;
  filter: grayscale(1);
  cursor: pointer;
}
.box .imgBx.active {
  position: fixed;
  top: 100px;
  left: 100px;
  height: calc(100% - 200px);
  width: calc(100% - 200px);
  z-index: 1000;
  opacity: 1;
  filter: grayscale(0);
}
.container .box .imgBx:hover {
  opacity: 1;
  filter: grayscale(0);
}
.container .box .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

App.js

import Header from "./components/Header";
import Container from "./components/Container";
import Footer from "./components/Footer";

function App() {
  return (
    <section>
      <Header></Header>
      <Container></Container>
      <Footer></Footer>
    </section>
  );
}

export default App;

Answer 1

我认为错误在下面这一行

const [isActive, setActive] = useState("false"); // false is a string

应该

const [isActive, setActive] = useState(false); //boolean

所以当你

className={`imgBx ${isActive ? "" : "active"}`} 
// it's finding isActive true, always as
// string is always true

如果你想设计你的项目，使每个 div 都有自己的活动状态，你应该，

//data.js

const data = [
   {
    image: './img/img1.jpg',
    status: false
},
 {
    image: './img/img2.jpg',
    status: false
}, {
    image: './img/img3.jpg',
    status: false
}, {
    image: './img/img4.jpg',
    status: false
},
]
export defaut data;

然后在你的项目中

import data from './data.js'

function Container() {
  const [dataProj, setdata] = useState(data);

  
  return (
<div className="container">
   {
    dataProj.map((item,index)=>(
  <div className="box" key={index+1}>
        <div className={`imgBx ${item.status? "" : "active"}`}>
          <img src={item.image} alt=`img${index+1}` onClick={()=>{
            let itemData = [...dataProj];
            let updatedItem = {...itemData[index],status:!item.status};
            itemData[index] = updatedItem;
            setdata(itemData);
} />
        </div>
      </div>
))
}
</div>
    
  );
}

export default Container;

这样您就可以为每张图片设置状态。希望有用，谢谢

React App，努力创建一个独立的 handleToggle

React App, struggling to create an independent handleToggle

javascript

reactjs

onclicklistener

Container.js

Container.css

App.js