时间戳

首页 > 解决方案 > 如何将 className 添加到单个 .map 项？

reactjs - 如何将 className 添加到单个 .map 项？

问题描述

我想将 className 添加到 .map 项目，但仅限于被点击的项目。

尝试了 useState （ {state ? "class" : ""} ），但它为我的循环中的所有项目添加了类。我也尝试过 useRef 但我了解到 useRef 不会导致重新渲染，因此结果没有在屏幕上更新。

示例代码：

    {posts.map((post)=> {
      return (
        <div className=`PLACE FOR CLASS` key={post.id}>
        {post.title}
        <button onClick={()=> onclick event to add class}>add</button>
        </div>
      )
    })}

那么在这种情况下只为单击的项目添加类的方法是什么？（我想我需要使用 Key 但不知道如何）

标签： reactjsdomjsx

解决方案

如果您不想将此信息添加到主状态 ( posts)，您可以创建一个单独的选定 id 列表，它将是这样的（假设您正在使用函数组件）

const [selectedPosts, setSelectedPosts]=useState([]);
...
{posts.map((post)=> {
  return (
    <div className={selectedPosts.includes(post.id) && "myClass"} key={post.id}>
    {post.title}
    <button onClick={()=> {setSelectedPosts(s => [...s, post.id])}}>add</button>
    </div>
  )
})}

推荐阅读