如何在响应setState Hook的情况下切换CSS类

如何解决如何在响应setState Hook的情况下切换CSS类

我尝试了不同的方法。但是不要设法切换此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>
)
}

解决方法

您可以使用private static int getMaxLength(String str,int k) { if (str.length() == k) return k; var hm = new HashMap<Character,Integer>(); int maxLength = 0; int startCounter = 0; for (int i = 0; i < str.length(); i++) { char c = str.charAt(i); if (hm.get(c) != null) { hm.put(c,hm.get(c) + 1); } else { hm.put(c,1); } //atmost K different characters if (hm.size() > k) { maxLength = Math.max(maxLength,i - startCounter); while (hm.size() > k) { char t = str.charAt(startCounter); int count = hm.get(t); if (count > 1) { hm.put(t,count - 1); } else { hm.remove(t); } startCounter++; } } } return maxLength; } 来实现。这个问题已经在这里回答了。 Toggle Class in React

,

它不会后退，因为您的三态始终为假。 使用selected作为三项条件，以便改回而不是true： 在第5行

,

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

它正在工作。谢谢