React：如何在卡片的地图功能中仅更改一张卡片的 CSS

Question

我对 React 很陌生，正在尝试创建一个函数，从数组中映射屏幕上的 5 张卡片，但只能更改被单击的卡片的 CSS。

export default function Projects(){
    const [card, setCard] = useState("on");

    const toggleCard =  (props) => {

        if(card === "cardOff"){
            setCard("cardOn");
            console.log("card is now on");
        }
        else{
            setCard("cardOff");
            console.log("card is now off");
        }
    }
    
    return(
        <div id = "projectsGridContainer">
            <div id = "projectsGrid">
                {projs.map(function(project){
                    return(
                        
                            <div id = "projectContainer" className = {card} onClick={toggleCard} >
                                <div className="projectImage">{project.image}</div>
                                <p id="projectTitle">{project.title}</p>
                                {/* <p>{project.description}</p> */}
                            </div>

                    );
                 })}
            </div>
        </div>
    )
}

该代码可以同时更改所有卡片的 CSS。有没有办法让只有单击的内容发生变化？

Answer 1

您的两个状态值是“cardOn”和“cardOff”。 （以及初始值“on”，该值永远不会再次使用。）给定这些值中的任何一个，您认为您的哪一张卡当前被“点击”？

将该信息存储在状态中。例如，如果您的“项目”有一个 ID 值，那么您可以将其存储在状态中。最初不会点击任何卡片：

const [card, setCard] = useState();

您可以在事件处理程序中设置点击的卡片：

onClick={() => setCard(project.id)}

并使用该值来确定类名称：

className={card === project.id ? "cardOn" : "cardOff"}