我有一个简单的部分，用户可以点击一个按钮，现在我想要点击改变（切换）文本的颜色，使用反应钩，这是我目前所拥有的。
const [textColor, setTextColor] = useState('black');
const handleChnageTextColor = (e) => {
setTextColor('#CCCCCC');
}
return(
<>
<label onClick={handleChnageTextColor} className="switch">
<input type="checkbox" />
<span className="slider round" />
</label>
<small style={{ color:textColor}} className="switch-container_text">advanced view</small>
</>
)
因此，单击时初始颜色为黑色，我正在将颜色更改为#cccccc。现在，再次单击时，颜色不会改变。
我需要添加什么，使这个切换在这两种颜色之间单击？
将handleChangeTextColor更改为以下内容：
const handleChnageTextColor = (e) => {
setTextColor(textColor === 'black' ? '#CCCCCC' : 'black');
}
您应该为checkbox的值赋一些状态变量，并使文本的颜色依赖于checkbox的值。下面的内容一定会帮助你达到预期的效果。
const [textColor, setTextColor] = useState('black');
const [isBlack, setIsBlack] = useState(true);
const handleChnageTextColor = (e) => {
setIsBlack(!isBlack);
setTextColor(isBlack ? '#CCCCCC' : 'black ');
}
return(
<>
<label className="switch">
<input type="checkbox" value={isBlack} onChange={handleChnageTextColor} />
<span className="slider round" />
</label>
<small style={{ color:textColor}} className="switch-container_text">advanced view</small>
</>
)
}
