问题描述
我尝试了不同的方法。但是不要设法切换此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>
)
它正在工作。谢谢