javascript - 使用 useState 向 .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() 来做到这一点。

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

标签： javascriptreactjsjsx

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>
);