使用react钩子在单击时更改文本颜色

Question

我有一个简单的部分，用户可以点击一个按钮，现在我想要点击改变（切换）文本的颜色，使用反应钩，这是我目前所拥有的。

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

您应该为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>
  </>
 )
}

Answer 2

将handleChangeTextColor更改为以下内容：

const handleChnageTextColor = (e) => {

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