如何切换 css 类以与 setState Hook 做出反应答案

【问题标题】：How to toggle css class in react with setState Hook如何切换 css 类以与 setState Hook 做出反应
【发布时间】：2020-12-10 17:00:26
【问题描述】：

我尝试了不同的方法。但不要设法切换这个 css 类。当我单击它时，书签应该变成蓝色。到目前为止，我可以使用 onClick 将其更改为 false，但随后它不会切换回来。
这是 ToggleBookmark 组件：

const ToggleBookmark = () => {

const [selected, setSelected]=useState(true);

const  toggleBookmark = () => {
setSelected(true?false:true);
   }

return(
<svg className={`toggleBookmark ${selected ? "toggleBookmark-active" : ""}`} onClick={toggleBookmark} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v17.582l-4-3.512-4 3.512v-17.582h8zm2-2h-12v24l6-5.269 6 5.269v-24zm-14 1h-10v2h10v-2zm0 5h-10v2h10v-2zm0 5h-10v2h10v-2zm0 5h-10v2h10v-2z"/></svg>
)
}

【问题讨论】：

标签： css reactjs toggle setstate classname

【解决方案1】：

您可以使用findDOMNode 实现此目的。这个问题已经在这里回答了。 Toggle Class in React

对于功能组件：

setSelected(!selected);

【讨论】：

谢谢。我看到了。但我想用 Hooks 解决它。
如你所见，我使用功能组件
setSelected(!selected);

【解决方案2】：

  const [selected, toggleSelected]=useState(false);
  return(
  <svg className={`toggleBookmark ${selected ? "toggleBookmark-active" : ""}`} onClick={()=>toggleSelected(!selected)} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.568.075c2.202 1.174 5.938 4.883 7.432 6.881-1.286-.9-4.044-1.657-6.091-1.179.222-1.468-.185-4.534-1.341-5.702zm-.824 7.925s1.522-8-3.335-8h-.409v12l-2.5-2.634-2.5 2.634v-12h-3v24h20v-13c0-3.419-5.247-3.745-8.256-3z"/></svg>
 )

而且它正在工作。谢谢

【讨论】：

【解决方案3】：

它不会回头，因为你的 tri 条件总是错误的。使用 selected 作为 tri 条件以更改回而不是 true： 5号线

【讨论】：