反应添加活动类以单击元素答案

【问题标题】：React add active class to click element反应添加活动类以单击元素
【发布时间】：2021-01-04 06:52:24
【问题描述】：

我想将活动类添加到单击元素，但它是工具。我该如何解决？

const PodcastTab = () => {
const [tabOpened, setTabOpened] = useState(false);

  return <div>
      <div>
          <span className={classNames('my-podcast',{'active':tabOpened})} onClick={()=>{setTabOpened(!tabOpened)}}>My Podcast</span>
          <span className={classNames('podcasts-stats',{'active':!tabOpened})} onClick={()=>{setTabOpened(!tabOpened)}}>Podcast's Stats</span>
          <div className="my-podcast-tab">
                <Podcast />
            </div>
            <div className="podcasts-stats-tab">
                <Podcast imgURL="https://i.picsum.photos/id/144/75/75.jpg?hmac=9kweqWXv0sL19dFj1CaMKxbH3kQMIuFFbHy2hWhKJ4w" status="x" title="y"/>
            </div>
      </div>
      
  </div>;
}

【问题讨论】：

这应该可以。请发布您的整个代码。
@PrateekThapa 我更新了，你能看到吗？当我两次单击同一个元素时，它会将活动类添加到另一个元素
您的代码看起来不错。尝试创建一个沙盒。
@PrateekThapa 你能看看我的新问题吗？stackoverflow.com/questions/64036219/…

标签： javascript css reactjs state

【解决方案1】：

您可以使用以下类名：

className={classNames('podcasts-stats',{tabOpened ? 'active' : ''})}

【讨论】：