使用react钩子在单击时更改文本颜色
使用react钩子在单击时更改文本颜色
提问于 2020-07-27 18:16:59
我有一个简单的部分，用户可以点击一个按钮，现在我想点击改变(切换)的颜色文本使用反应钩子这里是我到目前为止。
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，再次单击时颜色没有变化。
我需要添加什么才能在单击时在这两种颜色之间进行切换？
Stack Overflow用户
发布于 2020-08-17 01:09:09
您应该将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>
</>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63113222
复制相关文章
相似问题
腾讯云开发者
