반응 hook로 클릭시 텍스트 색상 변경

질문

사용자가 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 로 변경하고 있습니다. 다시 클릭하면 색상이 변경되지 않습니다.

클릭시이 두 색상 사이를 전환하려면 무엇을 추가해야합니까?

답변1

handleChangeTextColor를 다음과 같이 변경하십시오.

const handleChnageTextColor = (e) => {

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

답변2

체크 박스의 값을 상태 변수와 함께 할당하고 체크 박스 값에 의존하는 텍스트의 색상을 만들어야합니다.다음은 원하는 결과를 얻는 데 확실히 도움이 될 것입니다.

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>
  </>
 )
}

답변3

적용 할 색상을 결정하려면 요소 스타일 값을 확인해야합니다.

if(e.style.color === "black") '#CCCCCC' : 'black'

 

 

 

 

출처 : https://stackoverflow.com/questions/63113222/changing-text-color-on-click-with-react-hooks