我对 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。有没有办法让只有单击的内容发生变化?
您的两个状态值是“cardOn”和“cardOff”。 (以及初始值“on”,该值永远不会再次使用。)给定这些值中的任何一个,您认为您的哪一张卡当前被“点击”?
将该信息存储在状态中。例如,如果您的“项目”有一个 ID 值,那么您可以将其存储在状态中。最初不会点击任何卡片:
const [card, setCard] = useState();
您可以在事件处理程序中设置点击的卡片:
onClick={() => setCard(project.id)}
并使用该值来确定类名称:
className={card === project.id ? "cardOn" : "cardOff"}