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

Posted 2023-03-16

【中文标题】如何切换 css 类以与 setState Hook 做出反应

【英文标题】：How to toggle css class in react with 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"   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>
)

【参考方案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"   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号线