사용자가 button을 클릭 할 수있는 간단한 섹션이 있습니다. 이제 클릭을 통해 반응 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
로 변경하고 있습니다. 다시 클릭하면 색상이 변경되지 않습니다.
클릭시이 두 색상 사이를 전환하려면 무엇을 추가해야합니까?