Javascript 使用useState react将类添加到.map函数中的元素 {arrayCard.map（（项目，索引）=>{ return（handleClick（index，e）} src={item}/>） })}

这是我的卡片组件

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

这是我在我的组件中拥有的。我要做的是向单击的Card元素添加一个类。每一个都有不同的索引，但我不知道如何处理它

我有一个函数handleClick和一个useState（）来完成它

---

我希望你能帮我做这件事。谢谢

您需要更改

卡
组件：

 <button  onClick={props.onClick}  className="focus:outline-none">
     <Image
           
           src={props.src}
           alt="Card Pic"
           width={80}
           height={80}
     />
   </button>

const[isActive，setIsActive]=useState（false）；
常量handleClick=（e）=>{
setIsActive（值=>！值）；
道具。onClick（e）；
}
返回(
);
在单击另一张卡之前，我如何禁用这两张卡？如果它们相同，则禁用这两张卡，但如果它们不同，则再次启用它们？。我可以用onclick类禁用它们，但是当它们不相等时，我如何启用它们呢？因为那个状态在父组件中。
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>
);