javascript - 使用 react Hook 更改点击时的文本颜色

Question

我有一个简单的部分，用户可以在其中单击按钮，现在我想单击以使用 react Hook 更改(切换)文本的颜色，这就是我到目前为止所拥有的。'

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，现在当我再次单击时，颜色没有改变。

我需要添加什么才能在点击时在这两种颜色之间切换？

Answer 1

将你的handleChangeTextColor更改为以下内容:

const handleChnageTextColor = (e) => {

 setTextColor(textColor === 'black' ? '#CCCCCC' : 'black');
}