使用useState react向.map函数中的元素添加一个类

Question

<div>          
{arrayCard.map((item, index) => {
return (<Card key={index}  
onClick={(e) => handleClick(index, e)}  
src={item}   />) 
})}
</div>

这是我的卡组件。

<button  onClick={props.onClick}  className="focus:outline-none">
<Image

src={props.src}
alt="Card Pic"
width={80}
height={80}
/>
</button>

这是我的组件内部的内容。我要做的是向被点击的Card元素添加一个类。每一个都有不同的索引，但我不知道该怎么做。

我有一个函数handleClick和一个useState()来完成它。

我希望你能帮我解决这个问题。谢谢!

Answer 1

您需要更改您的Card组件:

const [isActive, setIsActive] = useState(false);
const handleClick = (e) => {
setIsActive(value => !value);
props.onClick(e);
}
return (
<button onClick={handleClick} className={`focus:outline-none ${isActive ? 'activeClass' : null}`}>
<Image src={props.src} alt="Card Pic" width={80} height={80} />
</button>
);