React中点击切换类名时三元表达式始终返回false的问题

嘿，我立马就发现了问题的根源——拼写错误！咱们一步步来解决：

1. 核心问题：参数拼写不一致 #

你在图片的onClick里传递的是"sgd1"，但在判断选中状态时用的是"sdg1"（注意字母g和d的顺序搞反了）！这就导致无论怎么点击，sdgs.indexOf("sdg1")永远返回-1，三元表达式自然一直是false，加不上selected类。

2. 修正点击事件代码 #

把onClick里的参数改成正确的"sdg1"，同时可以把indexOf > -1换成更直观的includes()，代码更简洁：

<img 
  src={no_poverty_1} 
  alt="No Poverty" 
  name="sdg1" 
  className={`${style.sdgTileSignUp} mx-2 my-4 ${ sdgs.includes("sdg1") ? style.selected : "" }`} 
  onClick={() => handleClick("sdg1")} 
/>

3. 优化handleClick函数（可选但推荐） #

因为状态更新依赖于前一个状态，建议用函数式更新来确保拿到最新的状态值，同时用filter替代slice移除元素，代码更简洁可靠：

const [sdgs, setSdgs] = useState([]);
const handleClick = (sdg) => {
  setSdgs(prevSdgs => {
    if (prevSdgs.includes(sdg)) {
      // 移除已存在的目标元素
      return prevSdgs.filter(item => item !== sdg);
    } else {
      // 添加新元素到状态数组
      return [...prevSdgs, sdg];
    }
  });
};

这样修改后，点击图片就能正确切换selected类啦！

内容的提问来源于stack exchange，提问作者Kautilya Kondragunta